state 끌어올리기

state 끌어올리기 (state Lifting)

React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식, 단방향 데이터 흐름을 따르고 있다.

그렇다면 단방향 데이터 흐름의 장점은 무엇일까?

우선, 기능 변경 사항에 대한 코드 수정이 적어 진다. 또 복잡하지 않아 코드의 흐름을 알기 쉽다는 장점이 있다.


여기서 하위 컴포넌트의 이벤트로 상위 컴포넌트의 상태를 바꾸어 주려면 어떻게 해야할까? 즉 부모만 자식에게 데이터를 줄 수 있고, 자식은 부모에게 데이터를 줄수 없다. 하지만 자식이 부모의 상태를 변경해야 한다면? 또 여기서 형제 컴포넌트의 상태를 변경하고 싶으면?

이 때 state 끌어올리기 라는 것이 있다.

React에서 state를 공유하는 일은 그 값을 필요로 하는 컴포넌트 간의 가장 가까운 공통 조상으로 state를 끌어올림으로써 이뤄낼 수 있습니다. 이렇게 하는 방법을 “state 끌어올리기”라고 부릅니다. -React 공식홈페이지-

1. 상위 컴포넌트에서 state를 변경시키는 상태변경 함수를 만든다.

hadleState = () => {this.setState()}

2. 이 함수는 자식에게 props로 넘겨진다.
3. 자식은 이 함수를 받아 사용하면 부모의 상태를 변경할 수 있다. 이 때 상태가 변경됨으로 다시 render가 실행된다.

이때 부모 컴포넌트에서 this 를 꼭 bind 해서 넘겨야한다. 그래야 부모의 상태를 변경할 수 있다.

아직 this 배우지 않아 위 용법이 와닿지 않는다.
아니면 아래와 같이 수업에서 배운 방법을 참고하자.

/*부모 컴포넌트*/
import { useState } from "react";
// 자식컴포넌트 Child1, Child2 import
import Child1 from "../../src/components/units/board/14-flifting-state-up/Child1";
import Child2 from "../../src/components/units/board/14-flifting-state-up/Child2";

export default function LiftingStateUpPage() {
  // 자식 컴포넌트에 있던 state 와 setState를 지우고 부모 컴포넌트로 가져온다.
  const [count, setCount] = useState(0);

  // 방법 -1
  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <div>
      // 방법 - 2 setCount 자체 넘겨주기
      <Child1 count={count} setCount={setCount} />
      <div> ================================= </div>
      <Child2 count={count} onClickCountUp={}{onClickCountUp} />
    </div>
  );
}

/*자식2*/
// 벙법 -1

export default function Child2(props) {
  return (
    <div>
      <div>자식 2의 카운트: {props.count}</div>
      <button onClick={props.onClickCountUp}>카운트 올리기!!!</button>
    </div>
  );
}

/* 자식1 */
// 방법 -2 setCount 넘겨받기

export default function Child1(props) {

  const aaa = () => {
    props.setCount((prev) => prev + 1);
  };
  return (
    <div>
      <div>자식 1의 카운트: {props.count}</div>
      <button onClick={aaa}>카운트 올리기!!!</button>
    </div>
  );
}

자식1에서 state 값 변경해도 자식 2에서 작동이 잘 되는 것을 확인할 수 있다.

다음 포스팅에는

hadleState = () => {this.setState()}

위의 방법을 포스팅할 것이다.