props를 사용한 컴포넌트 간 데이터 주고받기

부모 컴포넌트 → 자식 컴포넌트

props를 사용해서 자식에게 데이터를 넘겨줄 수 있다.

(1) props 통째로 넘기기

const Parent = () => {
  const data1 = 100;
  const data2 = 200;
  return (
    <div>
      <Child 
    	data1={data1}
		data2={data2}
	  />
    </div>

const Child = (props) => {
  return (
    <p>{props.data1}</p>
    <p>{props.data2}</p>
  );
};

(2) 비구조화 할당으로 하나씩 넘기기

const Parent = () => {
  const data1 = 100;
  const data2 = 200;
  return (
    <div>
      <Child 
    	data1={data1}
		data2={data2}
	  />
    </div>

const Child = ({ data1, data2 }) => {
  return (
    <p>{data1}</p>
    <p>{data2}</p>
  );
};

자식 컴포넌트 → 부모 컴포넌트

함수 포인터를 넘기면 부모 컴포넌트에 데이터를 전달할 수 있다.

1. 부모에 상태를 업데이트 하는 함수를 만든다.
2. 자식에게 해당 함수를 가리키는 포인터를 props로 넘긴다.
3. 자식 컴포넌트는 props로 받은 함수의 파라미터로 데이터를 넘긴다.
4. 부모 컴포넌트에게 전달 완료!

const Parent = () => {
  const [data, setData] = useState(0);
  const getData = childData => {
    setData(childData);
  };
  return (
    <div>
      <p>{data}</p>
      <Child getData={getData} />
    </div>
  );
};
    

const Child = ({ getData }) => {
  const data = 100;
  const postData = () => {
    getData(data);
  };
  return (
    <div>
      <button onClick={postData}>
    	데이터 전송
      </button>
    </div>
  );
};

주의

바로 인접한 부모 컴포넌트끼리만 데이터를 주고받을 수 있다.

만약 GrandParent - Parent - Child 의 관계에서 GrandParent 의 데이터를 Child 로 넘긴다고 가정해보자. 이 경우 Parent 에서 해당 데이터가 필요하지 않아도 인접한 컴포넌트끼리만 데이터를 주고받을 수 있기 때문에 중간에서 Parent 가 데이터를 넘겨줘야만 한다.