[리액트] Redux toolkit

Redux Toolkit: Redux Toolkit은 Redux의 공식 도구세트로, 상태 관리를 좀 더 간단하고 효율적으로 할 수 있도록 도와준다. 기본 Redux 설정은 코드가 많고 반복적일 수 있는데, Redux Toolkit은 이런 부분을 최소화해준다.

---

먼저 store.js 파일을 생성한다. Redux Toolkit의 configureStore API를 가져온다.

아래는 초기 설정된 Redux Store의 예시 코드이다.

store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

이렇게 하면 Redux Store가 생성된다.

• configureStore는 Redux Toolkit에서 제공하는 API로, Redux store를 쉽게 설정할 수 있게 해준다. 이 함수는 여러 가지 Redux 미들웨어와 DevTools 설정 같은 것들을 자동으로 처리해줘서, 원래 Redux에서는 꽤 번거로웠던 설정을 간단하게 해줄 수 있다.
• reducer: {} 부분은 Redux의 리듀서를 등록하는 곳이다. 리듀서는 액션에 따라 상태를 어떻게 변경할지 정의하는 함수인데, 여기에 {} 이렇게 비어있으면 아무 리듀서도 등록되지 않은 상태라고 보면 된다.

store가 생성되면, React-Redux의 <Provider>를 애플리케이션 주위에 배치하여 React 구성 요소에서 Redux 스토어를 사용할 수 있게 설정할 수 있다. 이를 위해 src/main.js 파일에서 방금 생성한 Redux 스토어를 가져와 <Provider>를 <App> 주위에 배치하고, 스토어를 props로 전달한다. 이렇게 하면 React 구성 요소에서 Redux 스토어에 접근할 수 있게 된다.

main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './store/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

counterSlice.js 이름의 새파일을 추가한다. 해당 파일에서 createSliceRedux Toolkit에서 API를 가져온다.

counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

createSlice는 Redux Toolkit의 API 중 하나로, 액션 생성자와 리듀서를 쉽게 만들어주는 함수다. 일반적으로 Redux에서 액션 타입, 액션 생성자, 리듀서를 각각 따로 작성해야 하는데, createSlice를 사용하면 이 모든 것을 한 번에 처리할 수 있다.

createSlice 함수는 객체를 인자로 받는데, 이 객체에는 name, initialState, 그리고 reducers 필드가 필요하다.

name은 Slice의 이름, initialState는 초기 상태, reducers는 리듀서 함수들을 객체 형태로 정의한다.

이렇게 하면 counterSlice.actions에는 increment와 decrement 액션 생성자가 자동으로 생성되고, counterSlice.reducer에는 리듀서 함수가 생성된다. 이를 통해 코드를 훨씬 간결하고 관리하기 쉽게 만들 수 있다.

counterSlice라는 이름의 slice를 만들었다면, 이제 Redux Store 애는 이렇게 설정할 수 있다.

Store.js

import { configureStore } from '@reduxjs/toolkit'
import counterSlice from './counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

이렇게 하면 counterSlice.reducer가 counter라는 이름으로 store에 등록된다. 이제 이 리듀서는 state.counter로 접근할 수 있게 될 것이다. 이 slice에서 정의한 액션 생성자들로 상태를 변경할 수 있게 될 것이다.

이제 React-Redux의 훅을 사용해 React 컴포넌트가 Redux Store와 상호작용할 수 있다. useSelector를 통해 저장소의 데이터를 가져오고, useDispatch를 통해 액션을 디스패치할 수 있다.

App.jsx

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './counterSlice';

function App() {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

1. useDispatch와 useSelector 훅을 react-redux에서 가져온다. 이 훅들은 Redux store와 상호작용하기 위해 사용된다.
2. increment와 decrement 액션 생성자를 counterSlice에서 가져온다.
3. useDispatch 훅을 사용해 Redux store에 dispatch할 수 있는 함수를 가져온다.
4. useSelector 훅을 사용해 Redux store의 counter 상태를 가져온다.
5. Increment와 Decrement 버튼을 렌더링하고, 각 버튼이 클릭되면 increment 또는 decrement 액션을 dispatch한다.

이상으로 React와 Redux Toolkit을 설정하고 사용하는 방법에 대한 간략한 개요를 마무리하겠다.