[Next.js 14] Redux, Redux-toolkit 환경세팅, 사용법
안녕하세요.
Next.js와 TypeScript를 사용하며 Redux-toolkit 및 Redux를 세팅하는방법이 조금 까다로운 부분이 있어 포스팅하게되었습니다.
Next.js의 버전은 14버전을 기준으로 하니, 참고해주세요.
Redux
우선 Redux를 알아보기전에 '상태'를 먼저 간단히 알아보겠습니다.
React에서 State는 Component 안에서 관리되는 것입니다.
자식 컴포넌트들 간 데이터를 주곱다을 때는 상태를 관리하는 부모컴포넌트를 통해 주고받습니다.
하지만 이러한 상태를 관리하는 상위 컴포넌트에서 Props의 형식으로 계속 내려받아야 하는 특성상, 자식컴포넌트가 많아진다면 상태관리가 매우 복잡해지기 마련입니다.
또한, 자식컴포넌트측에서 props로 받아온 state를 변경한다고 해도, 부모컴포넌트에 영향을 줄 수 없는 단점이 있습니다.
Redux를 프로젝트에 도입하기로 마음먹으셨다면, 위와같은 문제들을 통해 React, 혹은 Next.js에서 'State'만으로는 해결하기 어려운 문제를 만나셨을것이라고 생각합니다.
이러한 문제를 해결하기위해 '전역상태관리' 가 탄생하게됩니다.
리덕스를 사용하면, 상태 관리를 컴포넌트 바깥에서 한다는 장점이 있습니다.
Redux의 흐름은 아래와 같습니다.
위 그림처럼, Redux는 Action, Reducer, Store의 흐름으로 이어지게됩니다.
Store
Store는 상태가 관리되는 오직 하나의 공간입니다.
컴포넌트와 별개로, 스토어라는 공간이 있어서 이 스토어에 어플리케이션에서 필요한 state를 담습니다.
이렇게 별개로 분리된 공간에 컴포넌트는 상태 정보가 필요할 때 접근할 수 있습니다.
Action
Action은 어플리케이션에서 Store에 운반할 데이터입니다.
Action은 자바스크립트 객체 형식으로 되어있습니다.
Reducer
Action을 Store에 바로 전달하는 것이 아닌, Action을 Reducer에 전달하면, Reducer는 Action의 데이터를 보고 Store의 State를 업데이트 합니다.
Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용하여야합니다. (이 메소드는 아래 Reducer 사용하기 탭에서 안내하겠습니다.)
Redux / Redux-ToolKit 세팅
1.
먼저 Redux를 세팅합니다.
Redux를 그대로 사용하지않고, 우리는 Redux를 쉽게 사용할 수 있는 Redux-Toolkit을 사용할것입니다.
이 Redux-Toolkit은 Redux 공식문서에서 공식적으로 추천하는 방법이라고 나와있습니다.
자세한 내용은 https://ko.redux.js.org/introduction/getting-started/ 로 이동하시면 자세한 내용이 적혀져있습니다.
# NPM의 경우
npm install @reduxjs/toolkit redux
# Yarn의 경우
yarn add @reduxjs/toolkit redux
2.
다음으로, src directory 내부에 'redux'라는 디렉토리를 만듭니다.
app 디렉토리 외부에 있어야 합니다.
이 디렉토리에 우리는 redux.ts 파일과, store.ts 파일을 만들것입니다.
이후, redux.ts에서 slice를 만들어줍니다.
여기서 slice는 상태관리의 분리 개념이며, 해당 객체와 관련된 상태들을 모아놓고, 객체간 분리를 해놓는 일종의 분리체계라고 이해하시면 편할것같습니다.
여기서, 각각의 slice들은 'name'을 통해 분류됩니다.
initialState는 이 slice의 초기 상태이며, reducers를 통해 이 상태를 update시킬 수 있습니다.
useState hook의 state, setState의 개념과 유사하다고 생각하시면 될것같습니다.
이렇게 만든 action을 export하고, slice도 export합니다.
그리고, redux디렉토리 안에 'store.ts'를 만들어주고,
위와 비슷한 형태로 코드를 작성합니다.
여기서, configureStore 안에 이전에 작성하였던 slice의 name을 key로 넣고, value는 해당 리듀서에 맞게 임의적으로 정리하여 작성합니다.
아래의 RootState Type은 Redux Store의 상태 전체를 나타내는 타입으로, Redux Store의 getState 메서드를 사용하여 반환되는 상태객체의 타입을 나타냅니다.
또한, AppDispatch Type은 Redux Store의 Dispatch메서드 타입으로, 디스패치할 수 있는 액션의 타입을 제공합니다.
3.
마지막으로, redux를 사용하려면, provider 설정을 해주어야합니다.
이 provider설정을 next.js에서 하려면, app 디렉토리의 layout.tsx를 세팅해주어야합니다.
하지만, redux는 client side에서만 사용할 수 있기때문에 (useSelector와 useDispatch와 같은 Redux의 클라이언트 전용 훅 때문), layout.tsx에 그대로 Provider 설정을 해주면 에러가 발생합니다.
따라서, 클라이언트 전용 레이아웃 컴포넌트를 사용하여 layout.tsx에 주입해주는 방식으로 사용하여야 에러를 피할 수 있습니다.
이 ClientLayout은 app 디렉토리 외부의 components를 정리해놓는 디렉토리를 하나 만들어 그 안에 만들어줍니다.
이후, 이 ClientLayout을 app 디렉토리 내부의 layout.tsx에 아래와 같이 주입해줍니다.
이렇게 하면 layout.tsx에 기존방식대로 Provider를 주입하여 store를 호출하면 발생하던 에러를 피할 수 있게됩니다.
결과
이제 사전준비는 끝났습니다.
어떤가요? 간단하지 않나요?
Redux를 사용하면 이런저런 설정을 많이 해주어야하는 반면, Redux Toolkit을 사용하면 쉽게 Redux를 사용할 수 있게됩니다.
이제 component로 가서, 이 redux를 사용해보겠습니다.
useSelector훅과, useDispatch훅을 불러와서 변수의 형태로 저장합니다.
여기서 useSelector훅으로 저장한 변수는 useState의 state, 즉 데이터이고, useDispatch훅을 사용하여 저장한 변수는 setState, 즉 상태변경입니다.
위 그림과 같이 updateTokenList에 data를 넣어주고, tokenList를 진행하고있는 프로젝트의 Row Components에 props로 내려주면
데이터가 잘 나오는것을 볼 수 있습니다.
이후, 이 전역 상태관리를 통해 어떠한 기능을 구현할 수 있는지에 대해 포스팅을 하도록 하겠습니다.
도움이 되셨으면 좋겠습니다.
긴 글 읽어주셔서 감사합니다.