React 상태 관리 - Context API, Provider 패턴, Redux vs Zustand 비교

Mon, 16 Feb 2026 13:20:00 +0900

Props drilling 문제를 겪어보신 적 있나요? 컴포넌트가 깊어질수록 상태를 여러 단계에 걸쳐 전달해야 하는 문제가 발생합니다. 이번 글에서는 전역 상태 관리 아키텍처 패턴과 실전 Context 조합 전략, 그리고 프로젝트 규모에 맞는 상태 관리 솔루션 선택 방법을 알아봅니다.

상태 관리의 필요성

Props Drilling 문제

중간 컴포넌트들이 실제로 사용하지 않는 props를 단순히 아래로 전달만 하는 상황입니다.

// Props Drilling 예시
function App() {
 const [user, setUser] = useState(null);

 return <Layout user={user} setUser={setUser} />;
}

function Layout({ user, setUser }) {
 return (
 <div>
 <Header user={user} setUser={setUser} />
 <Main user={user} />
 </div>
 );
}

function Header({ user, setUser }) {
 return <UserMenu user={user} setUser={setUser} />;
}

function UserMenu({ user, setUser }) {
 // 실제로 사용하는 곳은 여기
 return user ? (
 <button onClick={() => setUser(null)}>로그아웃</button>
 ) : (
 <button onClick={() => setUser({ name: '홍길동' })}>로그인</button>
 );
}

중간 컴포넌트들은 user와 setUser를 직접 사용하지 않지만 전달만 하고 있습니다. 이것이 Props Drilling 문제입니다.

Architecture on Korobopolly's Dev Blog

React 상태 관리 - Context API, Provider 패턴, Redux vs Zustand 비교

상태 관리의 필요성

Props Drilling 문제