단방향 데이터 흐름

React에서의 데이터 흐름은 부모->자식 형태의 단방향 흐름이다. 부모가 가진 변수나 함수를 props를 통해 자식에게 넘겨줄 수 있다. 따라서 부모 컴포넌트 안에 자식 컴포넌트가 두 개 이상 있는 경우 자식 컴포넌트 간의 변수, 함수 공유는 불가능하다.

단방향 데이터 흐름의 장점 : 코드의 흐름을 알기 쉽고, 코드 수정이 쉽다.

state Lifting

state lifting이란 자식 컴포넌트의 state와 setState를 부코 컴포넌트로 끌어 올려 선언해 주는 것을 말한다. react의 경우 데이터의 흐름이 단방향이므로 자식 컴포넌트의 변수를 부모 컴포넌트로 끌어올려주게 되면 같은 부모 컴포넌트를 둔 다른 자식 컴포넌트들간의 변수 공유가 가능해진다.

state Lifting 예시

부모 컴포넌트

import { useState } from "react";
import Child1 from "../../src/components/units/board/14-lifting-state-up/Child1";
import Child2 from "../../src/components/units/board/14-lifting-state-up/Child2";

export default function LiftingStateUpPage() {
  const [count, setCount] = useState(0);

  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <Child1 count={count} onClickCountUp={onClickCountUp} />
      <div>=====================================</div>
      <Child2 count={count} onClickCountUp={onClickCountUp} />
    </div>
  );
}

자식 1

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

자식2

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

자식 1과 자식 2는 부모 컴포넌트로부터 같은 count, setCount를 받아 사용하고 있기 때문에 어떤 버튼을 눌러도 자식 컴포넌트가 가진 자식 1,2 카운트 값이 함께 증가하는 것을 확인할 수 있다.