계약직·정규직 제안 모두 열려 있습니다(토론토 · 리모트 협업)대화 나누기
Next.js에서 Redux Toolkit vs Context API: 언제 무엇을 쓸까?

2021년 9월 1일

Next.js에서 Redux Toolkit vs Context API: 언제 무엇을 쓸까?

nextjsredux-toolkitcontext-apistate-management

Next.js(App Router) 기준에서 Redux Toolkit과 React Context를 언제 써야 하는지 정리한 글입니다. 서버 컴포넌트, URL, 로컬 상태를 먼저 활용하고, 진짜로 복잡한 클라이언트 비즈니스 로직이 생길 때 Redux를 도입하는 현실적인 기준을 제안합니다.

1Next.js 앱에서 서버 상태, URL 상태, 로컬 상태, 전역(공유) 상태가 어떻게 구분되는지 설명한다.
2ThemeContext 예시를 통해 작은 전역 상태에는 Context가 적합하다는 점을 보여준다.
3Redux Toolkit으로 스토어/슬라이스/타입드 훅을 정의하고 App Router 레이아웃에 연결하는 최소 예제를 제공한다.
4Context가 커지고 업데이트가 잦아질 때 성능/구조 측면에서 왜 부담이 되는지 정리한다.
5Redux가 과한 경우와 꼭 필요한 경우를 구분하고, Next.js 시대의 현실적인 도입 전략을 제시한다.