React에서 Redux 사용하기
Redux Toolkit과 React Redux 패키지 설치하기
이번 장에서는 Redux의 공식 개발 도구인 Redux Toolkit을 사용하여 React에서 Redux를 설정하는 방법에 대해 살펴보도록 하겠습니다.
더불어 여러분이 Redux를 올바르게 사용할 수 있도록 Redux의 주요 API에 대해서도 알아보겠습니다.
Shell
# npm인 경우
npm install @reduxjs/toolkit react-redux
# yarn인 경우
yarn add @reduxjs/toolkit react-redux
Redux Store 생성하기
React 프로젝트 src 폴더에 app 폴더를 생성하고 해당 폴더에 store.js 파일을 생성합니다.
그리고 Redux Toolkit에서 configureStore 함수를 불러와 우선 빈 Store를 생성하고 내보냅니다.
store.js
import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: {} }); export default store;
Redux Store를 React에 제공하기
Store가 생성되면 src 폴더의 index.js 파일 내 존재하는 App 컴포넌트를 React Redux의 Provider 컴포넌트로 감쌈으로써 React 컴포넌트에서 Store를 사용할 수 있게 됩니다.
방금 생성한 Redux Store를 불러와 App 컴포넌트를 감싼 Provider 컴포넌트에 prop으로 전달할 수 있도록 index.js의 코드를 다음과 같이 수정합니다.
index.js
import React, { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import store from "./app/store"; import { Provider } from "react-redux"; import "./styles.css"; import App from "./App"; const root = createRoot(document.getElementById("root")); root.render( <StrictMode> <Provider store={store}> <App /> </Provider> </StrictMode> );
Redux State Slice 생성하기
Redux Toolkit에서는 Action과 Reducer를 한 번에 생성할 수 있는 createSlice() 함수를 제공합니다.
createSlice는 초깃값과 Reducer, Action을 하나의 객체로 전달 받으며, 생성된 slice 객체에서 Reducer와 Action을 다음과 같이 가져올 수 있습니다.
const { reducer } = counterSlice const { increment, decrement, incrementByAmount } = counterSlice.actions;
이제 src 폴더에 counterSlice.js 파일을 생성하고, 해당 파일에서 createSlice를 불러옵니다.
Redux Toolkit으로 slice를 만들기 위해서는 slice를 식별할 수 있는 문자열과 state의 초깃값, state를 업데이트하는 방법을 정의한 하나 이상의 Reducer 함수가 필요합니다.
slice가 생성되면 생성된 Redux 액션 생성자와 전체 slice에 대한 Reducer 함수를 내보낼 수 있습니다.
counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
name: "counter",
// 초깃값
initialState: {
value: 0
},
// 리듀서
reducers: {
// 액션
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
}
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
Store에 Slice Reducer 추가하기
이제 counterSlice의 Reducer 함수를 가져와 Store에 추가하기 위한 코드를 store 컴포넌트에 추가합니다.
Reducer 매개 변수 내부에 필드를 정의함으로써, Slice Reducer 함수를 사용하여 해당 상태의 모든 업데이트를 처리하도록 Store에 전달할 수 있습니다.
store.js
import { configureStore } from "@reduxjs/toolkit"; import counterReducer from "../counterSlice"; const store = configureStore({ reducer: { counter: counterReducer } }); export default store;
React 컴포넌트에서 Redux state와 Action 사용하기
마지막으로 React Redux Hook을 사용하여 React 컴포넌트가 Redux Store와 상호 작용할 수 있도록 설정합니다.
useSelector Hook을 사용하면 Store의 데이터를 읽을 수 있으며, useDispatch Hook을 사용하면 Action을 Dispatch할 수 있습니다.
예제(App.js)
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment } from "./counterSlice";
const App = () => {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<div>
<button onClick={() => dispatch(decrement())}>1씩 감소</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>1씩 증가</button>
</div>
</div>
);
};
export default App;
