상태 끌어올리기

상태 끌어올리기

하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은
마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있습니다.

React가 제시하는 해결책은 다음과 같습니다.

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

여전히 단방향 데이터 흐름의 원칙에 부합하는 해결 방법입니다. 바로 이것이 "상태 끌어올리기" 입니다.

import React, { useState } from "react";

export default function 부모컴포넌트() {
  const [변수, 상태변경함수] = useState("<변경 전>");
  const 상태변경함수실행 = () => {
    상태변경함수("<변경 후>");
  };
  
  return (
    <div>
      <div>값은 {변수} 입니다</div>
      <자식컴포넌트 콜백={상태변경함수실행}/>
    </div>
  );
}


function 자식컴포넌트({콜백}) {
  const 콜백실행 = () => {
    콜백()
  };
  return <button onClick={콜백실행}>버튼이름</button>;
}