상태 끌어 올리기

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

---

React에서 상태 끌어올리기란 두 개 이상의 자식 컴포넌트 간의 동일한 상태를 공유하고자 할 때 사용하는 방법입니다.

이러한 경우 공유되는 상태를 가장 가까운 공통 부모 컴포넌트로 끌어올린 후 부모 컴포넌트에서 props로 값을 내려주어야 합니다. 즉, 자식 컴포넌트에서 부모 컴포넌트로 상태를 끌어올리는 것입니다. 이 방법을 상태 끌어올리기라고 합니다.

사용하는 이유

• 데이터 공유: 두 컴포넌트가 동일한 데이터를 사용하고 업데이트해야 할 때, 상태 끌어올리기는 이를 가능하게 합니다.
• 단방향 데이터 흐름: React는 데이터를 위에서 아래로(부모에서 자식으로) 전달하는 단방향 데이터 흐름을 가집니다. 상태 끌어올리기는 이 원칙을 활용하여, 공유 상태를 관리합니다.
• 상태 관리의 중앙화: 상태를 공통 부모 컴포넌트에서 관리함으로써, 여러 자식 컴포넌트 사이의 데이터 일관성을 유지할 수 있습니다.

예시코드

import { useState } from 'react';

// 공통 부모 컴포넌트
function Parent() {
  const [sharedValue, setSharedValue] = useState('');

  function handleChange(newValue) {
    setSharedValue(newValue);
  }

  return (
    <>
      <ChildA value={sharedValue} onValueChange={handleChange} />
      <ChildB value={sharedValue} />
    </>
  );
}

// 자식 컴포넌트 A
function ChildA({ value, onValueChange }) {
  // 이 컴포넌트는 onValueChange도 함께 전달했기 때문에 상태를 변경할 수 있음
  // 이 컴포넌트는 상태를 읽을 수 있음
}

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

• 공통 부모 컴포넌트 Parent에서 상태를 공통으로 관리하고, ChildA, ChildB 는 해당 상태를 공유합니다.
• ChildA 컴포넌트에서는 onValueChange도 함께 전달했기 때문에 상태를 변경할 수 있고, value 값을 통해 상태를 읽을 수 있습니다.
• ChildA 컴포넌트에서 상태를 변경하면 상위 컴포넌트에 있는 상태가 변경되기 때문에, **ChildB에 있는 상태인 value 값도 변경**됩니다.
• ChildB 컴포넌트에서는 onValueChange가 전달되지 않았기 때문에 상태 읽기만 가능합니다.