[React] 하위 state를 상위 컴포넌트로 끌어올리는 방법

단방향 데이터 흐름을 위반 해야할 때

react에 기초적인 원칙 중 하나인 단방향 데이터 흐름에 따라, 상위 컴포넌트에서 정의된 state는 하위 컴포넌트로만 전달된다.

그런데, 하위 컴포넌트에서 발생한 이벤트로 인해 상위 컴포넌트의 state가 변경되어야하는 상황이 종종 있다.

예를 들어, 어떤 검색 컴포넌트를 눌렀을 때 새로운 데이터 리스트를 조회 해야하던가, 카운터 버튼을 통해 상위 state 에 +1 을 해야하는 상황이 그렇다.

카운터 예시

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState(0);

  const handleChangeValue = () => {
    setValue((prev) => prev+1);
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  const handleClick = () => {
    
  };

  return <button onClick={handleClick}>+1</button>;
}

handler 함수를 state로 넘겨주는 방법

이 경우 상위 컴포넌트에 정의된 state를 조작하는 함수 handleChangeValue를 state로 하위 컴포넌트에 전달해 해당 함수를 실행시키키는 방법을 이용한다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState(0);

  const handleChangeValue = () => {
    setValue((prev) => prev+1);
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent changeValue={handleChangeValue}/>
    </div>
  );
}

function ChildComponent({changeValue}) {
  const handleClick = () => {
    changeValue(); //props 로 전달된 handleChangeValue 함수 새로운 이름
  };

  return <button onClick={handleClick}>+1</button>;
}

전달된 함수는 상위 컴포넌트에서 정의된 매개변수, 리턴값, 실행문을 그대로 실행한다.