[React] 자식 컴포넌트에서 부모로 데이터 보내기

리액트를 사용하다 보면 자식 컴포넌트에서 만들어진 데이터를 부모 컴포넌트로 보내야 할 때가 있다. 부모에서 자식으로 전달할 때는 props를 통해 비교적 쉽게 할 수 있지만 자식에서 부모로 전달할 땐 까다롭다.

방법은 다음과 같다. 부모 Component에서 useState를 통해 전달받을 데이터를 저장할 변수를 선언하고 props로 setter를 전달한다.

자식 Component에서는 부모로부터 전달받은 setter를 통해 전달할 데이터를 저장하면 된다.

import React, { useState } from 'react';

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
};

const Parent = (props) => {
  const [data, setData] = useState("initial data");
  
  return (
    <>
      <div>{data}</div>
      <Child setData={setData} />
    </>
  );
};

const Child = (props) => {
  return (
    <>
      <button onClick={() => props.setData("data from child")}>
        send data to parent
      </button>
    </>
  );
};