망고

📌개요 최근 회사에서 신규 프로젝트를 진행하는 과정에서 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 전달해야하는 작업이 필요했다. 예를들어 자식 컴포넌트에서 데이터 입력을 하면 그것을 부모 컴포넌트에서 데이터를 받아와서 다른 자식에게 전달해주는 작업이 필요했던 것이다. 이번 기회를 통해 리액트에서는 부모 자식간의 데이터 전달을 어떤식으로 통신하는지에 대해 알아보도록 하자!! 📌부모에서 자식으로 데이터 보내기 👉 props를 이용한다. props란 데이터를 전달하는 속성으로 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. Parent.js import React, { useState } from 'react' import Child from './Child'; const ..

1. 개념 React에서 자주 사용되는 Props와 State의 개념과 차이점입니다. Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다. 위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다. State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다 2. Props 우선 MyComponent 컴포넌트를 수정하여 ..