[React] State 끌어올리기

React개발 방식의 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 개발을 한다는 것이다. 그리고 props를 통해 데이터를 부모 컴포넌트에서 자식 컴포넌트로 내려주는것이 가능하다. 이를 단방향 데이터 흐름(one-way data flow)라 한다.
하지만 하위 컴포넌트의 에서 어떤 이벤트로 부모의 상태를 바꿔야만 하는 상황이 있을수도 있다. 이를 해결할 수 있는 방법이 'State 끌어올리기' 이다.
이는 상태를 변경하는 함수를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.

State 끌어올리기 예시

import React, { useState } from "react";

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>;
}

React에서는 해결책을 다음과 같다고 말한다.

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

위 예시에서 value의 값을 변경해주는 함수는 handleChangeValue 이다. 이 함수를 적절한 이름을 지어 prop를 이용해 전달 해준다.

function ParentComponent() {
  const [value, setValue] = useState("바뀔 값");

  const handleChangeValue = () => {
    setValue("이렇게 바뀐 값");
  };

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

props로 함수를 전달해주면 고차함수가 인자로 받은 함수를 실행하는것 처럼 컴포넌트 내부에서 함수를 실행 가능하다. 상태 변경 함수는 버튼 클릭 이벤트가 발생 했을때 실행되는것을 원하므로 handleClick함수 내부에 콜백함수를 실행한다.

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

    handleButtonClick()
  }

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

• props로 전달해준 함수를 클릭 이벤트가 발생했을때 실행시키기를 원하기 때문에 handleClick 에 콜백함수를 실행 한다.