next13-redux-toolkit,redux-wrapper 세팅 및 회원가입 기능 구현

어우 next13으로 업데이트 된 이후 app directory에서 redux-toolkit을 어떻게 끼워야 하는지

next와 redux 두곳 모두의 공식문서에 없어서 이틀을 꼬박 삽질하며 한참을 구글링 했다...

공식문서에는 언제 업데이트 될랑가..

https://codevoweb.com/setup-redux-toolkit-in-nextjs-13-app-directory/

기본적으로 위 링크의 정리 자료를 보고 참조 하였다.

src폴더 하위에 app폴더와 redux폴더를 두었으며 리듀서 및 thunk함수와 스토어는 redux폴더에서 관리할것이다.

 

1. Redux-toolkit 설치

npm install @reduxjs/toolkit react-redux next-redux-wrapper

npm i axios

redux 관련 패키지 및 비동기 통신을 위한 axios설치

 

.

.

 

2. Redux store 만들기

src/redux/store.ts에 configureStore API 를 불러와 store를 생성하고 

차후 사용할 userReducer를 리듀서에 넣어준다.

configureStore API를 사용하면 store에 대한 옵션과 기본 미들웨어를 지정할 수 있다.

차후 개발을하며 미들웨어를 추가할 예정이다.

하단의 RootState,AppDispatch type을 export하여 type을 유추해서 

새 상태를 추가하거나 미들웨어 설정을 변경할 때 최신 상태를 유지할수 있게 하였다.

.

.

3.Typed Hooks 정의

각 컴포넌트로 RootState 및 AppDispatch type을 import하는 대신

useDispatch 및 useSelector hooks의 typed versions을 생성하는 것이 좋다.

이렇게 하면 잠재적인 circular import dependency 문제를 방지하고 앱 전체에서 hooks를 더 쉽게 사용할 수 있다.

.

.

 

4. Custorm Provider 정의

Next.js 13에서는 모든 컴포넌트가 server-side component이므로,

client-side에 있는 custom provider component를 생성하고 이를 자식 노드에 감싸는 것이 필요하다.

.

.

5.Redux Store 제공

자식 노드에 custom provider component를 감싸면 모든 컴포넌트가 Redux store에 액세스할 수 있다.

.

.

6. Slice, Action Redux state 생성

Redux store와 provider컴포넌트가 설정되었으므로 이제 Redux를 활용하여 앱의 상태를 관리할 수 있다.

먼저 user 관련 상태관리를 담당할 slice파일을 생성해보자.

 

각 slice파일은 앱의 특정 상태 조각으로 생각할 수 있으며, 일반적으로 redux폴더의 features 폴더 내에 있다.

counter slice를 만들려면 redux폴더로 이동하여 features라는 새 폴더를 만든다.

src/redux/features/userSlice.ts

.

.

7. 비동기 작동을 위한 Thunk 함수 및 builder 작성

.

.

 

 

8.Redux State와 Action 사용하기

 

userslice를 사용해 앱의 상태를 관리할 RegisterPage 컴포넌트를 수정해 보자.

파일 시작 부분에 "use client" 플래그를 사용하여 이 코드가 client-side에 있어야 함을 표시해야 한다.

 

src/app/page.tsx 파일을 열고 해당 내용을 아래의 코드로 바꿔보자.

 

 

데이터가 잘 저장됨을 확인 !

.

.

.

.

.

어우 너무너무 많은 삽질과 시간이 들어갔다..

Next13에서 도입된 App directory때문에 초반 세팅에서 너무 해맸다..

또한 redux 를 토이프로젝트가 아닌 실제로 사용하려고하니 배우고 익혀야할 개념이 너무 많았다.

차후 미들웨어를 붙이고 ssr를 위한 세팅에서 또 꽤나 고생할꺼같지만 그래도 이틀 꼬박 

온 몸을 갈아넣어 세팅과 테스트마저 끝내니 너무 좋았다.

중간 중간 트러블슈팅을 정리하지 못해 아쉽긴 하지만 결론적으로.

난또 쥰나 강해졌다 ㅋㅋ

.

.

 

추가할 작업 

1. 미들웨어

2. ssr 세팅

3. 타입 리팩토링

4. combinedreducer 정리

5. slice와 thunk 정리