React 앱에서 전역 상태를 효율적으로 관리하는 다양한 패턴과 라이브러리를 비교합니다.
React의 기본 상태 관리(useState + props)는 컴포넌트 트리가 깊어지면 prop drilling 문제를 일으킵니다. Context API, Redux Toolkit, Zustand 등 다양한 해법이 있으며, 각각의 트레이드오프를 이해하는 것이 중요합니다.
각 접근법의 아키텍처를 비교하고, prop drilling 문제를 시각적으로 확인하세요.
const ThemeCtx = createContext('light');
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeCtx.Provider value={theme}>
<Toolbar />
</ThemeCtx.Provider>
);
}
function ThemedButton() {
const theme = useContext(ThemeCtx);
return <button className={theme}>Click</button>;
}실제 코드로 동작 원리를 확인하세요.
import { createContext, useContext, useState } from 'react';
const UserContext = createContext(null);
function UserProvider({ children }) {
const [user, setUser] = useState({ name: 'Kim' });
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
}
function Profile() {
const { user } = useContext(UserContext);
return <h1>{user.name}</h1>;
}
// 사용
function App() {
return (
<UserProvider>
<Profile />
</UserProvider>
);
}useState와 props입니다. 컴포넌트 트리가 깊어지면 prop drilling 문제가 발생합니다. 중간 컴포넌트들이 사용하지도 않는 props를 전달만 해야 하므로 유지보수가 어렵고, 불필요한 리렌더링이 발생합니다. 상태 관리 라이브러리는 이를 해결하여 전역 상태를 효율적으로 공유하고, 리렌더링을 최적화합니다.useMemo나 컴포넌트 분리로 우회할 수 있지만 복잡도가 증가합니다. 따라서 자주 변경되지 않는 값(테마, 로케일)에 적합하고, 빈번한 업데이트에는 Zustand/Redux가 낫습니다.create), Provider 없이 사용 가능, 셀렉터 기반 리렌더 최적화가 강점입니다. 번들 사이즈도 작습니다(~1KB). 대규모 팀에서는 컨벤션을 별도로 정의해야 하고, DevTools 지원이 제한적입니다.