React - state lifting

React는 단방향 데이터 흐름이다.
위에서 아래로 흐르는 데이터의 방향이 보통이다.
오늘 말하려고 하는건 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가
바뀌는 현상을 말하려고 하는데, 이건 위에서 아래로 흐르는 데이터의 방향과 모순적이라 이상하게
들리기도 한다.

state lifting의 정의는 이렇다.

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

이것이 단방향 데이터 흐름의 원칙에 부합하는 해결 방법이며, 상태 끌어올리기 라고 불려진다.

그렇다면 상태를 변경하는 함수를 하위로 어떻게 전달할까?

import React, { useState } from "react";

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

  const handleChangeValue = () => {
    setValue("강아지");
  };

  return (
    <div>
      <div>망고는 사실 {value} 입니다</div>
      <ChildComponent buttonChange={handleChangeValue} />
    </div>
  );
}

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

  return <button onClick={handleClick}>망고의 진짜 정체는</button>;
}

위에서 상태변경 함수는 handlechangevalue다.
handlechangevalue 함수 안에서 setValue("~")로 상태를 변경하고 있으며,
state lifting을 위해서는 이 상태함수를 하위로 전달해야한다.

전달은 props로 해줄것이다. 나는 이 props의 이름을 buttonChange라고 지었다.
이제 하위에 있는 는 마치 고차함수가 인자로 받은 함수를 실행하듯,
props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.
상태 변경 함수는 버튼이 클릭할 때 실행되기를 원하므로, 해당 부분에 콜백 함수를 실행한다.