[Redux] 리액트 Redux-Toolkit 환경 셋팅 (with NextJS + Typescript)

사전 준비

- redux 세팅에 필요한 패키지 설치

 npm i @reduxjs/toolkit react-redux

 

Redux 세팅하기

- redux.js 파일 생성 

redux.js 파일 생성후 아래와 같은 코드를 붙여넣는다.

(2번의 store.js 파일에 합쳐도 상관없음)

 

- store.js 파일 생성

store.js 파일 생성후 아래와 같은 코드를 붙여넣는다.

store 파일을 생성했다면, layout.js 파일로 가서 <Provider> 컴포넌트로 children을 감싸주면 된다.

 

- Provider 로 root 컴포넌트 랩핑 

 

자세한 설명은 아래 이전 포스팅 참고 ⬇️

[Next.js 13] Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> 에러 해

 

- state 만들기

createSlice에 slice 식별을 위한 문자열 이름을 ref 라고 작명해주었고
초기 상태 값은 imgUrl과 alTit 두 속성의 값으로 설정해주었다.

reducers 객체는 Redux-Toolkit에서 액션을 처리하고 상태를 업데이트하는 부분이다.

내 경우 action 객체에 전달된 데이터(action.payload) 로 초기 상태값을 변경해줄 것이기 때문에 아래같이 적었다.

즉, 전체 코드상에서 살펴보면

initialState로 초기 상태를 설정하고,

reducer를 통해 state 상태를 변경하고 있다.

 

상태값 업데이트를 위해 필요한 코드를 export했기 때문에

이제 사용하고자 하는 컴포넌트 파일에 가서 import 해주면 된다.

Redux를 사용할 컴포넌트에서는 다음의 추가적인 셋팅이 필요하다!

먼저 파일 상단에 useSelector, useDispatch hook을 불러와준다.

 

재생버튼을 클릭할 때마다 playSong 함수로 인자값을 전달해서 실행시키는데

playSong 함수에서는 'dispatch' 함수를 사용해 슬라이스에서 가져온 액션 생성자 함수를 호출한다.

초기 상태값은 빈 값으로 설정했었는데,

이 과정을 통해 Redux 스토어에 해당 액션을 보내어 상태를 변경시킬 수 있다.

 

useSelector는 Redux 스토어에서 특정 상태를 선택하는 hook이다.

useSelector 함수를 호출할 때 imageReducer의 속성에 등록된 상태들에 접근하게 되므로

store.js에 위 코드들을 추가해준다.

(여기서 reducer 속성명은 createSlice name 값과 동일하게 설정해야 한다! 중요)

 

여기서 imageReducer는 "ref" 슬라이스를 관리하며, 해당 슬라이스에는

아래의 "imgUrl", "alTit"이라는 상태가 포함되어 있다.

'createSlice'에서 'initialState' 객체를 정의하면,

그 객체는 "ref" 슬라이스의 초기 상태로 등록된다.

그리고 'useSelector' 함수를 호출하면 'imageReducer'의 'ref' 속성에 등록된 위 상태들에 접근할 수 있다.

 

'RootState'는 Redux 스토어의 전체 구조를 나타낸다.

이 구조는 모든 슬라이스의 상태를 포함한다.

 

useSelector로 선택한 상태는 dispatch 함수를 통해 상태값이 업데이트되기 때문에

위처럼 imgUrl, alTit 로컬 변수를 사용해서 값을 설정할 수 있게 된다.

 

아직 완성한 프로젝트는 아니지만,  위와 같이 해당 배너의 재생버튼을 클릭하면 

player 이미지와 텍스트가 관련 데이터로 업데이트된다.

 

네비게이션 버튼 클릭 or 배너 드래그해서 바뀐 배너의 재생버튼을 다시 클릭시

위와 같이 상태가 한 번 더 바뀐다.

 

redux-toolkit 용어 정리

dispatch
Redux 스토어에 액션을 보내는 역할을 한다. 액션을 스토어로 보내면 스토어의 상태가 변경된다.
Redux의 핵심 작동 원리 중 하나다.

useSelector 
Redux 스토어에서 특정 상태를 선택하는 역할을 한다.
useSelector 함수를 호출할 때 imageReducer의 속성에 등록된 상태들에 접근하여 해당 상태를 선택한다.

configureStore
Redux 스토어를 생성하고 구성하는 데 사용된다. Redux 스토어를 설정하기 위해 reducer 객체를 받는다.
reducer 객체는 여러 개의 slice를 포함하며, 각 slice에 대한 리듀서 함수를 지정한다.

imageReducer
Redux Toolkit을 사용하여 생성한 slice의 리듀서 함수다.
이 리듀서 함수는 해당 slice의 상태 변경을 처리한다.

initialState
슬라이스에 등록된 초기 상태를 말한다.

Reducer(단수) / Reducers(복수)
Reducer는 Redux에서 상태(state) 변경을 관리하는 함수다.
Reducers는 Redux 애플리케이션에서 여러 개 리듀서를 조합하는 개념이다.
   -> combineReducers 같은 Redux 도구를 사용해서 여러 리듀서를 하나로 결합하고
       전체 애플리케이션 상태를 관리할 수 있다. 

 

마치며

이번 next.js 프로젝트에서 처음으로 redux-toolkit 이라는걸 써봤다.

뭐든 그렇듯 처음이 어렵지, 익숙해지면 점차 구조가 들어오고 손에 익는 것 같다.

개인적으로 redux는 설정이 복잡하다는 소리가 있어서 사용하기 조금 꺼려졌지만,

그러한 의구심 속에서 사용해본 redux-toolkit 은 확실히 redux의 단점을 개선하여 나온 라이브러리인만큼

입문자도 쉽게 사용할 수 있다는 느낌을 받았다!

redux saga, redux-thunk 등 다른 redux 라이브러리 들도 있던데 redux-toolkit을 잘 공부해서

다른 라이브러리들도 점차 적응하여 나가는 것이 목표다!!

일단은 지금 배우는 redux-toolkit 을 차차 더 써보면서 이걸 왜 쓰는지 확실히 체감할 수 있기를 바란다.