[TIL] React - Lifting State Up

Today I Learned

상태관리 라이브러리 Redux를 배우기에 앞서 이전에 배웠던 상태 끌어올리기 (Lifting state up)을 복습하였다. 하위 컴포넌트에서 상위 컴포넌트의 상태(state)를 변경하기 위해서는 상위 컴포넌트로부터 상태를 변경하는 함수를 props로 받아와야 한다.

지금까지 나는 아래와 같은 식으로 작성하였다.

function ParentComponent() {
  const [value, setValue] = useState("original");

  const handleChangeValue = (newValue) => {
    setValue(newValue);
  };

  return (
    <div>
      <ChildComponent handleButtonClick={handleChangeValue}  />
    </div>
  );
}
  
function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick("change")
  }

  return (
    <button onClick={handleClick}>Change</button>
  )
}

그런데 오늘 다른 분의 코드를 보니 따로 핸들러 함수를 만들지 않고 setValue 함수를 바로 하위 컴포넌트로 전달할 수도 있었다.

function ParentComponent() {
  const [value, setValue] = useState("original");

  return (
    <div>
      <ChildComponent handleButtonClick={setValue}  />
    </div>
  );
}
  
function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick("change")
  }

  return (
    <button onClick={handleClick}>Change</button>
  )
}

어느쪽이 맞고 어느쪽이 틀린 건 아닌 것 같은데 계속 해서 위와 같은 식으로 쓰다보니 그게 습관이 돼서 setValue를 바로 하위 컴포넌트에 전달한다는 생각을 못했던 것 같다. stackoverflow를 찾아보니 이런 식으로 setState함수를 바로 전달하는 코드들을 심심찮게 찾아볼 수 있었다.