React Data Flow

1. 단방향

React의 데이터 흐름은 데이터가 한 방향으로만 흐릅니다.

데이터는 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전달됩니다.

마치 일방통행과 같습니다.

반면,

자식 컴포넌트 간의 데이터 전달은 불가능 합니다.

이러한 특징이 컴포넌트 간의 데이터 흐름을 예측 가능하고 이해하기 쉽게 만듭니다.

2. 계층 구조

여러 개의 컴포넌트는 서로 부모 컴포넌트와 자식 관계를 이루며 계층 구조를 형성합니다.

class Parent extends React.Component {
  state = {
    data: 'Hello from Parent'
  };

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child data={this.state.data} />
      </div>
    );
  }
}

const Child = ({ data }) => (
  <div>
    <h2>Child Component</h2>
    <p>{data}</p>
  </div>
);

export default Parent;

1. Parent 컴포넌트:

• 부모 컴포넌트로, state를 통해 데이터를 관리합니다.
• Child 컴포넌트를 포함합니다.
• Child에게 data라는 이름의 props를 전달합니다.

2. Child 컴포넌트:

• 자식 컴포넌트로, 부모로부터 받은 data props를 사용하여 데이터를 표시합니다.
• props는 부모 컴포넌트에서 전달되므로, 자식 컴포넌트는 props를 직접 변경할 수 없습니다.

만약 여러 자식 컴포넌트가 공통 데이터를 필요로 하거나
한 자식 컴포넌트에서 변경된 데이터를 다른 자식 컴포넌트에서 사용해야 할 경우
데이터를 부모 컴포넌트로 끌어올려서 관리할 수 있습니다.

Lifting State Up

(상태 끌어올리기)

부모 컴포넌트를 통해 자식 컴포넌트 간에 데이터를 공유할 수 있습니다.

아래 예시 소스 코드는 다음과 같습니다.

자식 컴포넌트1는 부모 컴포넌트의 상태를 업데이트하고
자식 컴포넌트2는 부모 컴포넌트의 상태를 받아서 사용합니다.

부모

const Parent = () => {
  const [data, setData] = useState('');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <Child1 onDataChange={handleDataChange} />
      <Child2 data={data} />
    </div>
  );
};

자식1

부모 컴포넌트에서 전달된 onDataChange 콜백 함수를 사용하여 입력값이 변경될 때 부모 컴포넌트의 상태를 업데이트합니다.

const Child1 = ({ onDataChange }) => (
  <div>
    <h2>Child1 Component</h2>
    <input type="text" onChange={(e) => onDataChange(e.target.value)} />
  </div>
);

자식2

부모 컴포넌트에서 전달된 data props를 사용하여 데이터를 표시합니다.

const Child2 = ({ data }) => (
  <div>
    <h2>Child2 Component</h2>
    <p>{data}</p>
  </div>
);

이와 같이 부모 컴포넌트를 통해 자식 컴포넌트 간에 데이터를 공유할 수 있습니다.

하나의 State를 여러 컴포넌트에서 관리하게 될 경우에는
반드시 컴포넌트들의 부모가 되는 컴포넌트에 State를 생성해야 합니다.
공유할 수 있도록 만드는 이런 방법을 State lifting 끌어올리기라고 합니다.

정리

데이터는 항상 위에서 아래로 하나의 방향으로만 전달되게 됩니다.

이러한 단방향 데이터 흐름은 파악하기가 매우 쉽고 직관적입니다.
그래서 복잡한 애플리케이션을 설계하더라도 보다 더 직관적으로 관리할 수 있습니다.

또, 단방향으로만 데이터가 전달되기 때문에 이런 점을 고려해서
데이터의 원천인 State를 어떤 컴포넌트에 위치시킬 것인지를 고민해서 결정해야 합니다.