State 끌어올리기

State 끌어올리기란?

상위 컴포넌트의  상태 변경 함수를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다.

 

 

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

  const handleChangeValue = () => {
    setValue("달라진 값");
  };

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

function ChildComponent() {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

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

 

상태를 변경하는 함수는 handleChangeValue 전달은 props.

 

ChildComponent는 마치 고차함수가 인자로 받은 함수를 실행하듯이, props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다. 다음은 "상태 변경 함수"는 버튼이 클릭할 때 실행되기를 원하기 때문에, 콜백함수를 실행한다.

 

 

---