React 상태 끌어올리기(Lifting State Up)에 대해 자세히 알아보겠습니다!

단방향 데이터 흐름

리액트에서 데이터는 항상 위에서 아래로 (부모에서 자식으로) 흐릅니다. 이는 "props"를 통해 구현됩니다. 자식 컴포넌트는 부모 컴포넌트로부터 받은 props를 사용할 수 있지만, 이를 직접 수정할 수는 없습니다. 상태(state)의 변경은 항상 소유하고 있는 컴포넌트 내에서 발생하며, 필요한 경우 자식 컴포넌트로 전달됩니다.

상태 끌어올리기 (Lifting State Up)

"Lifting State Up" 패턴은 두 개 이상의 자식 컴포넌트가 동일한 데이터를 공유해야 할 때 사용됩니다. 이러한 상황에서는 공유되는 상태를 가장 가까운 공통 부모 컴포넌트로 "끌어올립니다". 즉, 상태를 자식 컴포넌트에서 부모 컴포넌트로 이동시키는 것입니다.

결국 상위 컴포넌트의 "상태를 변경하는 함수" 그자체를
하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하게 만드는 것입니다.

동작 방식

• 상태 정의:
  상태는 공통 부모 컴포넌트에서 정의됩니다. 이는 부모 컴포넌트가 상태를 "소유"한다는 것을 의미합니다.

• 자식 컴포넌트에 props 전달:
  이 상태와 이를 변경하는 함수는 자식 컴포넌트에 props로 전달됩니다.

• 자식 컴포넌트에서 상태 변경:
  자식 컴포넌트는 전달받은 함수를 사용하여 상태를 간접적으로 변경할 수 있습니다.

• 상태 변경에 따른 리렌더링:
  상태가 변경되면, 부모 컴포넌트와 그 자식 컴포넌트들이 새로운 상태를 반영하여 리렌더링됩니다.

예시

// 공통 부모 컴포넌트
function ParentComponent() {
  const [sharedState, setSharedState] = useState('');

  function handleStateChange(newValue) {
    setSharedState(newValue);
  }

  return (
    <>
      <ChildComponentA value={sharedState} onValueChange={handleStateChange} />
      <ChildComponentB value={sharedState} />
    </>
  );
}

// 자식 컴포넌트 A
function ChildComponentA({ value, onValueChange }) {
  // 이 컴포넌트는 상태를 변경할 수 있음
}

// 자식 컴포넌트 B
function ChildComponentB({ value }) {
  // 이 컴포넌트는 상태를 읽기만 할 수 있음
}

위 예시에서 ParentComponent는 공통 상태를 관리하며, ChildComponentA와 ChildComponentB는 이 상태를 공유합니다. ChildComponentA는 상태를 변경할 수 있는 반면, ChildComponentB는 상태를 읽기만 할 수 있습니다.

function ChildComponentA({ value, onValueChange }) {
  const handleChange = (event) => {
    // 사용자 입력에 따라 상태 변경 함수 호출
    onValueChange(event.target.value);
  };

  return (
    <div>
      <h3>Child Component A</h3>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

function ChildComponentB({ value }) {
  return (
    <div>
      <h3>Child Component B</h3>
      <p>Shared value: {value}</p>
    </div>
  );
}

ChildComponentA와 ChildComponentB의 코드를 조금 더 상세하게 추가했습니다.

• ChildComponentA에서 사용자가 입력 필드를 변경하면, handleChange 함수가 호출되어 부모 컴포넌트의 handleStateChange 함수를 실행합니다.

• 이로 인해 부모 컴포넌트의 sharedState가 업데이트되고, 리액트는 부모 컴포넌트와 모든 자식 컴포넌트들을 새로운 상태로 리렌더링합니다.

• ChildComponentB는 새로운 상태를 받아 화면에 표시합니다.

이 예시는 상태 끌어올리기 (Lifting State Up) 패턴을 통해 두 자식 컴포넌트가 동일한 상태를 공유하고, 상태 변경이 한 컴포넌트에서 다른 컴포넌트에 반영되는 방식을 보여줍니다.