[React] 상태관리 라이브러리 - Redux toolkit(RTK)
이번 프로젝트의 필수 사항 중 하나인 리덕스툴킷!
확실히 리덕스의 아키텍처를 먼저 이해하고 보니 리덕스 툴킷이 훨씬 사용하기 쉽고 편리하다는 걸 알 수 있었다.
우선 Redux, React Redux, Redux toolkit 각각의 역할에 대해 알아보자.
- Redux : 상태 관리자, 프로그램이 동작하는데 필요한 데이터를 체계적으로 관리해주는 도구
- 리덕스 자체는 리액트에 최적화되었다기 보다 자바스크립트로 된 프로젝트에 최적화된 도구라고 할 수 있다.
- 리액트에서 사용하기 쉽게 등장한것이 react redux이다.
- React Redux : 리덕스와 리액트를 연결시켜주는 도구
- 그럼에도 불구하고 리덕스는 많은 설정을 해줘야한다는 것과 코드의 양이 방대해지는 단점들이 생김
- 이러한 단점들을 보완하기 위해 나온것이 Redux toolkit
리덕스툴킷이 등장하게 된 배경
- 기존의 리덕스는 설정할 것이 많음
- 미들웨어를 사용하려면 설치, 설정할 것이 많음
- 반복되는 코드
- 불변성 유지의 어려움
리덕스 사용해보기
간단하게 카운터가 증가하는 앱을 생성한다고 해보자.
import React from "react"
function Counter(){
return (
<div>
<button>+</button> 0
</div>
)
}
1. store 생성 (리덕스의 store는 단일 스토어임)
import { createStore } from "redux"
//1. 리듀서 정의
function reducer(state, action){
return state;
}
//2. 초기값 제공
const initialState = { value:0 }
//3. 스토어 생성
const store = createStore(reducer, initialState);
2. Provider를 통해 앱에 공급
import { Provider } from "react-redux"
export default function App(){
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
3. 카운터 컴포넌트 스토어에 있는 초기 value값을 가져오기
import React from "react"
import { useSelector } from "react-redux"
function Counter(){
const count = useSelector(state => state.value);
return (
<div>
<button>+</button> {count}
</div>
)
}
4. 앱의 버튼을 클릭했을 때 state(count)값을 바꾸는 dispatch 작업
import React from "react"
import { useSelector, useDispatch } from "react-redux"
function Counter(){
const count = useSelector(state => state.value);
const dispatch = useDispatch();
return (
<div>
<button
onClick={()=>{
dispatch({type:"up", step:2});
}}>+</button> {count}
</div>
)
}
5. dispatch 작업을 해준 뒤 이것을 받는 리듀서 작업
function reducer(state, action){
if(action.type === "up"){
// 이때, state를 리턴하는데
// 불변하게 코드를 다루기 위해 기존의 값을 복제 해준다.
return { ...state, value: state.value + action.step }
}
return state;
}이렇게 해주면 버튼을 클릭했을 때 count가 2씩 증가하는 걸 확인할 수 있다.
💡 리덕스 툴킷을 사용해보기 전 스토어에 대해 이해해보자.
지금까지 리덕스를 활용한 코드는 모두 하나의 store에 모든 정보를 담고있다.
하지만 프로젝트의 규모가 커지면 하나의 스토어에 너무 방대한 양의 코드가 들어가면서 기능을 구별하기 어려울 수 있다.
리덕스 툴킷에서는 기능별로 작은 스토어인 slice를 하나의 스토어에 모아두고 리덕스 툴킷이 알아서 값을 만들어 준다.
이 관점을 잘 이해하고 알아두자!
리덕스툴킷 사용하기
1. Counter 기능을 위한 작은 스토어라고 할 수 있는 counterSlice를 만들어보자.
import { createSlice } from @reduxjs/toolkit;
// createSlice에는 필요한 객체들이 있다.
const counterSlice = createSlice(
// slice의 이름
name:"counter",
// 초기값
initialState:{ value:0 }
// 리듀서 공급(s를 꼭 붙여야함), 타입별로 함수정의
reducers:{
// action.type이 up일때 이 함수가 실행할 것이다.
// 리덕스를 사용할 때는 불변성때문에 복제({})를 했었는데 툴킷에서는 자동으로 해줌
up:(state, action) => {
state.value = state.value + action.step
}
}
});
2. 작은 스토어인 slice를 만들어 준 뒤에는 모아주기위해 configureStore를 사용해준다. → 하나의 거대한 스토어 만들어주기
import { configureStore } from "@reduxjs/toolkit";
// configureStore에는 객체를 전달해주면 됨
const store = configureStore({
// 필수적으로 들어가야하는 항목
// 리듀서에는 각각의 슬라이스의 리듀서들이 들어가면됨
reducer:{
// counterSlice에 들어있는 모든 리듀서들이 합쳐진 것
counter:counterSlice.reducer
}
});
3. 데이터가 필요한 컴포넌트에서 state를 가져오기 위해 useSelector 사용
import React from "react"
import { useSelector, useDispatch } from "react-redux"
function Counter(){
const dispatch = useDispatch();
const count = useSelector(state => {
return state.counter.value;
});
return (
<div>
<button
onClick={()=>{
dispatch({type:"counterSlice/up", step:2});
}}>+</button> {count}
</div>
)
}
4. 리덕스 툴킷의 action creator를 사용해서 코드를 더 간결하게 만들어보자.
import React from "react"
import { useSelector, useDispatch } from "react-redux"
function Counter(){
const dispatch = useDispatch();
const count = useSelector(state => {
return state.counter.value;
});
return (
<div>
<button
onClick={()=>{
dispatch(counterSlice.actions.payload(2))
}}>+</button> {count}
</div>
)
}콘솔에 찍어보면 알겠지만 "counterSlice.actions.payload(2)" 했을 때 전달하는 값은 다 payload로 간다.
따라서 createSlice 값도 이렇게 변경됨
import { createSlice } from @reduxjs/toolkit;
const counterSlice = createSlice(
name:"counter",
initialState:{ value:0 }
reducers:{
up:(state, action) => {
state.value = state.value + action.payload
}
}
});직접 액션을 직접 만들어주는 경우는 원래대로 하겠지만 action creator를 사용할때는 payload를 사용하도록 약속되어있다. → 툴킷의 장점 중 하나
완성 코드!
App.js
import React from "react";
import store from './store';
export default function App() {
return (
<Provider store={store}>
<div>
<Counter></Counter>
</div>
</Provider>
);
}
Counter.js
import React from "react";
import { Provider,useSelector,useDispatch } from 'react-redux';
import { up } from './counterSlice';
function Counter(){
const dispatch = useDispatch();
const count = useSelector(state=>{
return state.counter.value;
});
return <div>
<button onClick={()=>{
dispatch(up(2));
}}>+</button> {count}
</div>
}
counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name:'counterSlice',
initialState:{value:0},
reducers:{
up:(state, action)=>{
state.value = state.value + action.payload;
}
}
});
export default counterSlice;
// 다른곳에서 사용하기 간결하게!
// counterSlice의 actions들 중에서 up을 내보내는 것.
export const {up} = counterSlice.actions;
store.js
import {configureStore} from '@reduxjs/toolkit';
import counterSlice from './counterSlice';
const store = configureStore({
reducer:{
counter:counterSlice.reducer
}
});
export default store;
📌