전역 상태 관리(props drilling, 전역 상태 관리 필요성)

props drilling

리액트를 쓰다 보면 props를 여러 단계로 넘겨주는 상황을 자주 마주치게 되는데, 이걸 우리는 "Props Drilling"이라고 부른다.

Props Drilling이란?

부모 컴포넌트에서 자식 컴포넌트까지 props를 여러 단계로 전달해야 할 때 발생하는 현상이다.

예제 코드로 간단히 살펴보자 👇

// App.jsx
import React, { useState } from "react";
import Parent from "./Parent";

function App() {
  const [user, setUser] = useState({ name: "Alice" });

  return (
    <div>
      <h1>Welcome</h1>
      <Parent user={user} />
    </div>
  );
}

export default App;

// Parent.jsx
import Child from "./Child";

function Parent({ user }) {
  return <Child user={user} />;
}

export default Parent;

// Child.jsx
function Child({ user }) {
  return <div>Hello, {user.name}!</div>;
}

export default Child;

여기서 문제점은 user라는 데이터를 App → Parent → Child 이렇게 쓸모 없는 중간 컴포넌트까지 계속 전달해야 한다.

앱이 커질수록 이런 전달이 점점 복잡해지고, 유지보수가 힘들어진다.

전역 상태 관리

이것을 해결할 수 있는 방법이 바로 전역 상태 관리 라이브러리다.
전역 상태 관리 라이브러리를 쓰면, 데이터를 필요할 때 직접 꺼내쓸 수 있게 된다.
대표적인 전역 상태 도구에는 Context API, Recoil, Zustand, Redux 등이 있다.

전역 상태 관리 라이브러리는 "마을 공동 금고"와 같다고 생각할 수 있다. 모든 주민(컴포넌트)이 필요한 물건(상태)을 이 공동 금고에서 꺼내 쓰거나, 새로운 물건을 공동 금고에 보관(상태 업데이트)할 수 있다. 이렇게 중앙 집중식으로 상태를 관리하면 데이터의 흐름이 명확해지고, 여러 컴포넌트 간에 효율적으로 데이터를 공유할 수 있다.

요약!!

1. Props Drilling이란?

• 상위 컴포넌트에서 하위 컴포넌트로 props를 계속 전달해야 하는 현상

• 중간 컴포넌트들이 실질적으로는 사용하지 않지만 props만 받아서 넘겨야 함

• 구조가 깊어질수록 코드 복잡도 증가, 유지보수 어려움

2. 전역 상태 관리란?

• 마을 공동 금고(전역 상태 관리 라이브러리)에서 필요한 컴포넌트에서 직접 꺼내 사용하는 구조

• 중간 전달 없이 효율적인 데이터 흐름 가능

• Context API, Recoil, Zustand, Redux 등 다양한 도구 존재

• 상태 관리 용이, 컴포넌트 재사용성 향상, 예측 가능한 상태 변화