[React] 하위 컴포넌트에서 상위 컴포넌트로 값 전달하기

 

프로젝트를 하다가 셀렉트 박스에서 값을 선택하면 상위 컴포넌트로 값을 넘겨줘야 할 일이 생겼다.

리액트에서 보통 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 통해 값을 전달할 수 있지만,

하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 때 props로 넘겨줄 수 없다.

 

이럴땐 전역 상태관리를 사용할 수도 있지만 거쳐야 하는 단계가 많지 않다면

상위 컴포넌트에서 하위 컴포넌트로 콜백함수를 props로 전달하고 하위 컴포넌트에서 해당 콜백함수를 호출해서 props로 전달할 수 있다.

 

// 상위 컴포넌트

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <>
      <ChildComponent onDataChange={handleDataChange} />
    </>
  );
}

export default ParentComponent;

상위 컴포넌트에선 useState를 통해 data를 상태값을 관리하고 있다.

handleDataChange() 함수를 통해 data 값을 업데이트 하는 로직을 구현했고 

하위 컴포넌트에 handleDataChange() 함수를 props로 전달한다.

 

// 하위 컴포넌트

import React from 'react';

function ChildComponent({ onDataChange }) {
  const sendDataToParent = () => {
    const newData = '안녕';
    onDataChange(newData); // 콜백 함수 호출하여 데이터 전달
  };

  return (
    <>
      <button onClick={sendDataToParent}>클릭</button>
    </>
  );
}

export default ChildComponent;

하위 컴포넌트에서는 버튼을 클릭할 때 마다 onClick 이벤트를 발생 시켜 sendDataToParent() 함수를 호출하는데 

sendDataToParent() 함수는 onDataChange 콜백함수를 호출해서 '안녕' 데이터를 전달한다.

 

그렇게 하면 onDataChange() 함수를 통해 상위 컴포넌트로 newData 값이 전달되고

setData 함수를 통해 data 상태가 업데이트 된다.