[React] State 끌어올리기(Lifting State Up)

State 끌어올리기

리액트는 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 State로부터 왔는지, 하드코딩으로 입력한 내용인지는 알 수 없다.
그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 여겨질 수 있다. 이에 대한 해결책이 '상태 끌어올리기' 이다.

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다

여전히 단방향 데이터 흐름의 원칙에 부합하는 해결 방법입니다.

//예제
import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

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

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

  return <button onClick={handleClick}>값 변경</button>;
}

위에 예시를 보면, 부모 컴포넌트 안에서 자식 컴포넌트에 props로 상태를 변경하는 함수를 전달한다. props를 전달받은 자식 컴포넌트는 handleClick 함수 내에서 상태를 변경하는 함수를 실행한다. 그러면 부모 컴포넌트에 있는 value 값이 변경되는 것을 확인할 수 있다.