Redux Toolkit 사용법

 

Redux는 복잡한 상태 관리를 효율적으로 처리할 수 있는 강력한 도구입니다. 그러나 초기 설정의 복잡성과 보일러플레이트 코드의 양 때문에 많은 개발자들이 사용을 꺼리기도 했습니다. Redux Toolkit은 이러한 문제를 해결하기 위해 만들어진 라이브러리로, 간단하고 직관적인 방식으로 Redux를 설정하고 사용할 수 있도록 돕습니다. 이 블로그에서는 Redux Toolkit의 주요 기능과 사용법에 대해 자세히 살펴보겠습니다.

Redux Toolkit이란?

Redux Toolkit(RTK)은 Redux의 공식 상태 관리 툴셋입니다. RTK는 Redux의 사용을 간소화하고, 최적화된 기본 설정을 제공하며, 보일러플레이트 코드를 줄이는 데 중점을 둡니다. 주요 기능은 다음과 같습니다:

• configureStore: Redux 스토어 설정 간소화
• createSlice: 리듀서와 액션 크리에이터를 한번에 정의
• createAsyncThunk: 비동기 작업을 간단하게 처리
• 내장 미들웨어: Redux-Thunk와 DevTools 지원

Redux Toolkit 설치하기

Redux Toolkit과 React-Redux를 설치하려면 다음 명령어를 사용하세요:

npm install @reduxjs/toolkit react-redux

Redux Toolkit의 주요 구성 요소

1. configureStore

configureStore는 Redux 스토어를 설정할 때 발생하는 복잡성을 줄여줍니다.

기본 사용법:

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

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

configureStore는 기본적으로 Redux DevTools와 Redux Thunk를 포함하므로 추가 설정이 필요 없습니다.

2. createSlice

createSlice는 액션 크리에이터와 리듀서를 한번에 생성할 수 있는 기능을 제공합니다.

예제:

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

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

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

이 코드는 increment, decrement, incrementByAmount라는 액션과 함께 리듀서를 생성합니다.

3. createAsyncThunk

비동기 작업을 처리할 때 유용한 createAsyncThunk를 사용하면 복잡한 비동기 로직을 간단히 구현할 수 있습니다.

예제:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await axios.get('/api/users');
  return response.data;
});

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: false },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.entities = action.payload;
      })
      .addCase(fetchUsers.rejected, (state) => {
        state.loading = false;
      });
  },
});

export default usersSlice.reducer;

createAsyncThunk를 사용하면 비동기 상태 관리를 위한 로직을 간단히 작성할 수 있습니다.

React에서 Redux Toolkit 사용하기

1. Provider로 스토어 연결하기

React 애플리케이션에서 Redux Toolkit을 사용하려면 Provider를 통해 스토어를 연결해야 합니다.

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

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

2. useSelector와 useDispatch 사용하기

useSelector와 useDispatch는 React 컴포넌트에서 Redux 상태를 읽고 업데이트하는 데 사용됩니다.

예제:

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

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

3. 비동기 작업 사용하기

비동기 작업은 dispatch를 통해 호출할 수 있습니다.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from './usersSlice';

function UsersList() {
  const users = useSelector((state) => state.users.entities);
  const loading = useSelector((state) => state.users.loading);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

결론

Redux Toolkit은 Redux의 설정과 사용을 크게 단순화하여 개발자들이 보다 쉽게 상태 관리를 구현할 수 있도록 돕습니다. 위에서 살펴본 기능들을 활용하면 효율적이고 유지보수 가능한 애플리케이션을 만들 수 있습니다. React와 Redux Toolkit으로 더 나은 상태 관리를 경험해보세요!