• About
• Preview
• Code Overview
• Run This Project
• How To Init Redux Toolkit Project

( Toolkit을 쓰지 않는, Redux의 기본적인 사용법은 endidj/redux-nextjs-typescript 에서 참고해주세요. )

Redux Toolkit 를 Next.js( Typesciprt ) 프로젝트에 ,

1. 어떻게 적용하는지 ( How To Use ? )
   
2. 어떤 현상이 일어나는지 ( What Happen ? )
   
   

• 모든 컴포넌트는 렌더링이 될 떄마다 콘솔에 찍힙니다.
• ( Redux의 효과 ) Left3의 + , - , Set 5 버튼을 눌렀을 때
  Right3 컴포넌트만이 재렌더링 되는 것을 확인할 수 있습니다.
• 만약, props를 통해 상태 변경을 했다면,
  상태가 전달되는 과정에서 다른 컴포넌트들이 재렌더링 됐을 것입니다.

📦src
┣ 📂components
┃ ┣ 📜Left.tsx          // Redux 전역상태 변경
┃ ┗ 📜Right.tsx         // Redux 전역상태 구독
┣ 📂pages
┃ ┣ 📜index.tsx         // 메인 페이지
┃ ┗ 📜_app.tsx          // Redux Toolkit을 프로젝트에 적용
┣ 📂store
┃ ┣ 📂slices
┃ ┃ ┗ 📜counterSlice.ts  // Counter Slice
┃ ┗ 📜store.ts          // 전역상태 저장소
┗ 📂styles
┃ ┗ 📜globals.css

의존 모듈 설치 ,

yarn

개발 모드 실행 ,

yarn dev

운영 모드 실행 ,

yarn build
yarn start

프로젝트 생성 : Next.js ( typescript )

yarn create next-app project-name --typescript

Redux Toolkit 모듈 : React, Next.js와 호환되는 모듈

yarn add redux react-redux @reduxjs/toolkit

Redux 빌드타임 모듈 : 빌드시에만 사용할, 모듈 및 @types

yarn add -D @types/react-redux