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

React는 원래 props를 이용해서 부모에서 > 자식으로만 데이터를 전달할 수 있다.

하지만 부모컴포넌트에서 데이터를 변경하는 함수를 props로 전달한다면

자식 > 부모로도 데이터를 전달(변경)이 가능하다.

 

• 자식➡️부모 데이터 전달하기

Parents.js

import { use State } from "react";
import Child from "./Child.js";

function Parents (props) {
  let [name, setName] = useState("Chicken");
  function ChangeName(name : string) {
    setName(name);
  }
  return (
  <div>
    <Child ChangeName={ChangeName}></Child>
    {name}
  </div>
  )
}

export default Parents;

 

 

Child.js

function Child (props) {
  function ChangeName() {
    props.ChangeName("Soy_Chicken");
  }
  return (
     <div>
       <button onClick={ChangeName}> 변경버튼 </button>;
     </div>
  )
}

export default Child;

 

위와 같이  부모 컴포넌트에서 생성한 함수를 통해 자식에서 전달받아 state를 통해 데이터를 수정하여 

전달할 수 있습니다.