[React] 데이터 흐름 & State 끌어올리기

출처

• 리액트는 기본적으로 단방향 데이터 흐름을 가지고 있다. 부모 -> 자식

• 하지만 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 경우가 종종 있다.

• 예를 들면, 하위 컴포넌트에서의 클릭 이벤트가 부모의 상태를 바꾸어야만 하는 상황이 왔다면,

• 이를 해결할 수 있는 개념이 바로 State 끌어올리기 이다.

• 컴포넌트는 props 형태로 속성을 내려 받아 인자로 사용할 수 있는데, State 끌어올리기는 이 props로 상태를 변경시키는 함수를 전달하여 문제를 해결하는 방법을 말한다.

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

라는 개념이다.

• 여전히 단방향 데이터 흐름의 원칙에 부합하는 해결방식라고 할 수 있다.

import React, { useState } from 'react';

// Parent Component
function Parent() {
  // 부모 컴포넌트의 상태
  const [count, setCount] = useState(0);

  // 상태를 업데이트하는 함수
  const handleUpdateCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Count: {count}</p>
      {/* Child 컴포넌트에 상태 업데이트 함수를 props로 전달 */}
      <Child onButtonClick={handleUpdateCount} />
    </div>
  );
}

// Child Component
function Child({ onButtonClick }) {
  return (
    <div>
      <h2>Child Component</h2>
      {/* 버튼 클릭 시 부모로부터 받은 함수를 호출 */}
      <button onClick={onButtonClick}>Increase Count</button>
    </div>
  );
}

export default Parent;

---

정리❗

React는 기본적으로 단방향 데이터 흐름이라는 원칙을 가진다.

• 상위 컴포넌트에서 하위로는 이동할 수 있지만 반대로는 불가하다.
  그러나 종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영할 필요가 생긴다.

• 이 때, state 끌어올리기 개념으로 데이터 변경사항을 상위 컴포넌트로 전달할 수 있다.

• 데이터를 직접 상위로 전달하는 것과는 다르게, state를 직접 전달하는 것이 아닌
  state 갱신 함수를 전달 받아 해당 함수를 실행시키는 원리이다.