React - 상태 끌어올리기(State Lifting)

 

 

React를 사용하다 보면 컴포넌트 간에 같은 데이터를 공유해야 할 때가 있다. 이럴 때 사용하는 패턴이 바로 상태 끌어올리기(state lifting)다. 이 글에서는 상태 끌어올리기의 개념부터 예제, 사용하는 이유까지 단계별로 정리해본다.

상태 끌어올리기란?

여러 컴포넌트가 같은 상태를 공유해야 할 때, 해당 상태를 공통 부모 컴포넌트로 올리는 것을 상태 끌어올리기라고 한다.

React는 데이터가 항상 위에서 아래(부모 → 자식) 방향으로 흐르기 때문에, 형제 컴포넌트끼리 데이터를 공유하려면 부모 컴포넌트를 통해야 한다.

왜 상태를 끌어올려야 할까?

형제 컴포넌트가 서로 다른 상태를 가지면 데이터가 불일치할 수 있다. 이 경우 공통 부모가 상태를 관리하고 자식에게 props로 내려주는 방식이 가장 깔끔하다.

예를 들어, 두 개의 입력창이 있고 한쪽에서 입력한 값이 다른 쪽에도 반영되어야 할 경우를 보자.

❌ 상태를 끌어올리지 않은 예시

function FirstInput() {
  const [text, setText] = useState("");
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

function SecondInput() {
  const [text, setText] = useState("");
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

각 입력창이 독립적인 상태를 갖고 있어서 서로 영향을 주지 않는다. 즉, 한쪽 입력값이 다른 쪽에 반영되지 않는다.

✅ 상태를 끌어올린 예시

function Parent() {
  const [text, setText] = useState("");
  return (
    <>
      <FirstInput text={text} setText={setText} />
      <SecondInput text={text} setText={setText} />
    </>
  );
}

function FirstInput({ text, setText }) {
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

function SecondInput({ text, setText }) {
  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

이제 하나의 입력창에서 입력하면 다른 입력창에도 동일하게 반영된다. 상태는 공통 부모인 Parent가 가지고 있고, 자식은 props를 통해 상태를 전달받는다.

상태 끌어올리기의 흐름

1. 형제 컴포넌트 간 데이터 공유 필요 발생
2. 공통 부모 컴포넌트가 상태를 관리
3. 자식 컴포넌트는 props로 상태와 set 함수를 전달받음
4. 자식에서 상태를 변경하면 부모를 통해 상태가 갱신되고, 변경 사항이 다시 자식에게 전달됨

언제 사용하는가?

• 형제 컴포넌트끼리 데이터를 공유할 필요가 있을 때
• 입력값에 따라 다른 컴포넌트가 반응해야 할 때
• 공통된 동작이나 상태 관리를 한 곳에서 처리하고 싶을 때

요약

항목	설명
상태 끌어올리기	자식들이 공유할 상태를 부모 컴포넌트로 이동시키는 기법
목적	컴포넌트 간 상태 동기화
방법	부모에서 상태를 관리하고, 자식은 props로 전달받아 사용

 

 

상태 끌어올리기는 React의 데이터 흐름 제어의 핵심이다. 더 복잡한 상태 관리가 필요하다면 Context API나 Redux 같은 도구로 확장하면 된다.