React - State 상태 끌어올리기

State 상태 끌어 올리기

단방향 데이터 흐름이라는 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태나 타입이 무엇인지만 알수 있다. 즉, 데이터가 state로부터 왔는지, 하드코딩으로 입력된 내용인지 알지 못한다. 이러한 문제를 React는 다음과 같이 해결했다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 이것은 단방향 데이터 흐름의 원칙을 벗어나지 않는 해결 방법이다. 이것이 바로 상태 끌어올리기 이다.

예제
다음 예제는 부모와 자식 컴포넌트가 하나씩 존재하는 트리 구조이다. 그리고, 상태를 변경시킬 수 있는 메서드가 존재한다고 생각해보자.

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

상태를 변경하는 함수는 handleChangeValue이고, 전달은 props로 한다.

function ParentComponent() {
  const [value, setValue] = useState("바꿀값");
  const handleChangeValue = () => {
    setValue("달라진 값");
  };
  
  return (
    <div>
    	<div>값은 {value} 입니다.</div>
		<ChildComponent handleButtonClick={handleChangeValue} />
    </div>
  );
}

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

function ChildComponent({handleButtonClick}) {
  const handleClick = () => {
    // 인자로 받은 상태 변경 함수를 실행
    handleButtonClick()
  };
  return <button onClick={handleClick}>값 변경</button>;
}