1. Next.js 프로젝트 생성하기
npx create-next-app 플젝이름 --typescript
이 때, 터미널에 ESLint 쓸거냐고 물어보는데, yes라고 대답하면 ts 관련 의존성 패키지들도 알아서 다운받아준다.
만약에 안 깔아준다면, 직접 깔아주면 된다.
npm install --save-dev typescript @types/react @types/node
2. Redux 설치하기
next에서 redux를 사용하려면, 2가지가 필요하다.
npm install react-reduxnpm install next-redux-wrapper
3. redux devtools
redux devtools를 사용하면, 현재 스토어의 상태를 개발자 도구에서 조회할 수 있고, 지금까지 어떤 액션들이 디스패치 되었는지, 그리고 액션에 따라 상태가 어떻게 변화했는지 확인할 수 있다.
3-1. 크롬 웹 스토어에서 확장 프로그램 설치하기
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
3-2. 프로젝트에 redux devtools 설치하기
npm install redux-devtools-extension
3-3. 프로젝트 최상단 파일에 import 하기
인터넷에는 react 프로젝트 기준으로 설명한 글이 많아서, index.js 파일에 설치하라고 한다.
next에서는 react 프로젝트의 index.js 파일 역할을 하는 것이 _app.ts라고 생각해서 여기에 import를 해주었다. (잘 돌아감)
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./modules";
import { composeWithDevTools } from "redux-devtools-extension"; // 리덕스 개발자 도구
const store = createStore(rootReducer, composeWithDevTools()); // 스토어를 만듭니다.
export default function App({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
3-4. 크롬 개발자 도구 열어서 확인하기
참고 자료
'Library-Framework > Redux' 카테고리의 다른 글
redux-persist로 localStorage 관리하기 (0) | 2023.05.10 |
---|---|
[Redux] Redux 사용해서 Counter 구현하기 (Next.js + TypeScript) (0) | 2023.05.08 |