📌 React 앱을 가볍게! 전역 상태 관리로 구조 최적화하기

React에서 상태를 관리할 때 가장 기본적으로 사용하는 것은 useState이다.

하지만 앱의 규모가 커지고 여러 컴포넌트에서 동일한 상태를 사용해야 할 때,

단순한 useState만으로는 한계가 발생한다. 그 이유는 바로 props drilling 때문이다.

 

🔹 Props Drilling 이란?

Props Drilling이란 상태나 함수를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들을 거쳐 계속 props로 내려보내는 현상을 말한다.

<App>
  <Child1>
    <Child3>
      counter 표시
    </Child3>
  </Child1>
  <Child2>
    <Child6>
      counter 증가 버튼
    </Child6>
  </Child2>
</App>

 

App 컴포넌트에서 counter 상태를 만들고 Child3, Child6에서 각각 상태를 읽거나 변경해야 한다면,

이 값을 중간 컴포넌트들을 계속 거쳐서 props로 전달해야 하는 번거로움이 생긴다.

export default function App() {
  const [counter, setCounter] = useState(1)
  return (
    <Child1 counter={counter}/>
    <Child2 counter={counter} setCounter={setCounter}/>
  )
}

function Child1({ counter }) {
  return <Child3 counter={counter} />
}

function Child2({ counter, setCounter }) {
  return <Child6 counter={counter} setCounter={setCounter}/>
}

function Child3({ counter }) {
  return <div>Count: {counter}</div>
}

function Child6({ counter, setCounter }) {
  return <button onClick={() => setCounter(counter + 1)}>+</button>
}

 

🚫 Props Drilling 의 문제점

• 상태를 사용하지 않는 컴포넌트도 전달만을 위해 존재하게 된다.
• 트리 구조가 깊어질수록 상태 전달이 복잡해진다.
• App 컴포넌트가 지나치게 많은 상태를 관리하게 되어 무거워진다.
• 모든 상태 변경이 App에서 시작되므로 렌더링 성능도 저하된다.

🧬 전역 상태 관리가 필요한 순간

• 여러 컴포넌트에서 동일한 상태를 사용해야 할 때
• 상태를 깊은 트리 구조에서 관리해야 할 때
• 상태를 전역적으로 공유하고 싶은 경우

이러한 경우엔 전역 상태 관리 도구를 사용하는 것이 훨씬 효율적이다.

🌐 전역 상태 관리 도구 예시

목적	도구
React 기본 제공	Context API
외부 라이브러리	Redux, Redux Toolkit, Recoil, Zustand 등

 

이러한 도구를 사용하면 필요한 컴포넌트에서 바로 상태를 꺼내 쓸 수 있기 때문에 중간 컴포넌트를 거치지 않아도 된다.

🔍 전역 상태 관리의 장점 요약

• props drilling 없이 필요한 곳에서 바로 상태 접근 가능
• 상태를 한 곳에서 일관되게 관리하여 유지보수성이 향상됨
• 상태 변경 흐름이 명확해져 디버깅과 로직 추적이 쉬워짐
• 확장성과 재사용성이 뛰어남
• 전역 저장소를 기반으로 여러 기능(비동기, 미들웨어 등) 연동 가능

✅ 마무리

전역 상태 관리 도구는 단순히 props 전달을 줄여주는 것 이상으로,

앱 구조의 복잡도를 낮추고 상태 흐름을 명확하게 만들며, 유지보수와 확장성 측면에서도 강력한 이점을 제공한다.

작은 규모의 앱에서는 useState와 props로 충분할 수 있지만,

컴포넌트가 많아지고 상태 공유가 많아질수록 전역 상태 관리 도구를 도입하는 것이 현명한 선택이 될 수 있다.