[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

1.부모 컴포넌트 👉 자식 컴포넌트

• 일반적인 props 사용 방법이다.

Parent.js

function Parent() {
	const [data,setData] = useState(1);
  return <Child data = {data}></Child>;
}

Child.js

function Child({data}) {
	console.log(data);
  	return <div>Child</div>;
}

2.자식 컴포넌트 👉 부모 컴포넌트

1) 부모 컴포넌트에서 함수를 정의한다.
2) 함수를 자식 컴포넌트에 props로 내려준다.
3) 자식 컴포넌트의 data를 부모 컴포넌트에게 전달받은 함수의 인자로 전달한다.

Parent.js

function Parent() {
  const parentFunction = (x) => {
    console.log(x);
  };

  return <Child parentFunction={parentFunction}></Child>;
}

Child.js

function Child({ parentFunction }) {
  const [data, setData] = useState(2);
  parentFunction(data);
  return <div>Child</div>;
}