Prompt
Next.js 리덕스 툴킷(Redux Toolkit, RTK) 사용
Next.js 프로젝트에서도 리덕스 툴킷(Redux Toolkit, RTK) 사용 가능합니다.
다만, Next.js의 버전에 따라(App Router 또는 Pages Router) 설정 방식에 약간의 차이가 있으며, 특히 최신 버전인 **App Router(Next.js 13 이상)**에서는 서버 컴포넌트(Server Components) 개념 때문에 주의할 점이 몇 가지 있습니다.
1. App Router에서 사용 시 주의사항
최신 Next.js 환경에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트입니다. 하지만 Redux는 **브라우저의 상태(Client State)**를 관리하는 도구이므로 다음과 같은 구조로 설정해야 합니다.
- "use client" 사용: Redux Provider와 useSelector, useDispatch를 사용하는 컴포넌트는 반드시 파일 최상단에 "use client"를 명시해야 합니다.
- Provider 분리: layout.tsx에 직접 Provider를 넣기보다, 별도의 Providers.tsx 클라이언트 컴포넌트를 만들어 감싸는 방식을 권장합니다.
추천하는 프로젝트 구조
Plaintext
src/
├── app/
│ ├── layout.tsx
│ └── Providers.tsx (Redux Provider를 감싸는 클라이언트 컴포넌트)
├── lib/
│ ├── store.ts (Redux Store 설정)
│ └── features/ (Slice 파일들)
│ └── counterSlice.ts
2. 간단한 설정 단계 (App Router 기준)
1단계: 패키지 설치
Bash
npm install @reduxjs/toolkit react-redux
2단계: Store 및 Slice 생성 (lib/store.ts, lib/features/counterSlice.ts)
일반적인 리덕스 툴킷 사용법과 동일하게 configureStore와 createSlice를 사용합니다.
3단계: 클라이언트 Provider 만들기 (app/Providers.tsx)
TypeScript
"use client";
import { Provider } from "react-redux";
import { store } from "@/lib/store";
export default function Providers({ children }: { children: React.ReactNode }) {
return <Provider store={store}>{children}</Provider>;
}
4단계: Root Layout에 적용 (app/layout.tsx)
TypeScript
import Providers from "./Providers";
export default function RootLayout({ children }) {
return (
<html>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
3. 요약 및 선택 가이드
| 구분 | 추천 여부 | 특징 |
| 단순 전역 상태 | Zustand 권장 | 설정이 훨씬 간편하고 가볍습니다. |
| 복잡한 상태/대규모 | Redux Toolkit 권장 | 체계적인 구조와 강력한 DevTools를 제공합니다. |
| 서버 데이터 캐싱 | TanStack Query 권장 | 서버 데이터 동기화는 RTK Query보다 훨씬 유연합니다. |
결론적으로 사용은 가능하지만, Next.js의 서버 컴포넌트 이점을 최대한 살리려면 꼭 필요한 경우(로그인 정보, 전역 UI 상태 등)에만 제한적으로 사용하고, 서버 데이터는 가급적 Next.js의 자체 Fetching 기능을 활용하는 것이 성능상 유리합니다.
'New' 카테고리의 다른 글
| 크롬 브라우저의 디바이스 모드 활용하기 (0) | 2026.02.16 |
|---|---|
| HTML코드 라인 중 JS 를 배치하기 가장 좋은 자리 (0) | 2026.02.10 |
| 리액트에서 MySQL 테이블 연결하여 CRUD 기능 구현하는 로직 예시 코드 (0) | 2026.01.15 |
| 리액트 프로젝트에 MySQL 데이터베이스 연결하는 방법 (0) | 2026.01.15 |
| 리액트 프로젝트 개발 효율과 가이드라인 유지에 도움 되는 최신 도구와 라이브러리 추천 (0) | 2026.01.15 |