Redux Toolkit: Redux를 더 쉽고 강력하게

Redux Toolkit은 Redux의 사용성을 개선하기 위해 만들어진 공식 도구입니다.
기존 Redux보다 코드 작성이 간단하고 유지보수성이 높은 애플리케이션을 만들 수 있게 해줍니다.
이번 글에서는 Redux Toolkit의 주요 기능과 사용법, 그리고 기존 Redux와의 차이점을 다뤄보겠습니다. 😊

 

1. Redux Toolkit이란?

Redux Toolkit은 Redux의 공식 유틸리티로, 복잡한 설정을 자동화하여 개발자의 생산성을 높이는 데 중점을 둡니다.

주요 특징

1. 간단한 설정
   • configureStore를 사용하여 스토어 생성이 쉬움
2. 간결한 코드
   • createSlice로 리듀서와 액션을 한번에 정의
3. 비동기 작업 통합
   • createAsyncThunk로 비동기 작업을 쉽게 처리
4. 내장된 미들웨어
   • Redux Thunk가 기본 포함

 

2. Redux Toolkit 설치

설치 명령어

npm install @reduxjs/toolkit react-redux

 

3. Redux Toolkit 기본 사용법

1) 리듀서와 액션 정의 (createSlice)

Redux Toolkit의 createSlice는 리듀서와 액션을 한 번에 정의할 수 있습니다.

예제: 카운터 리듀서

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Immer를 사용해 불변성 관리
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

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

 

2) 스토어 생성 (configureStore)

configureStore는 미들웨어와 Redux DevTools 설정을 자동으로 처리합니다.

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

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

export default store;

 

3) React 컴포넌트에서 사용하기

React에서 Redux를 사용하려면 react-redux의 useSelector와 useDispatch를 활용합니다.

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

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>+10</button>
    </div>
  );
}

export default Counter;

 

4. Redux Toolkit으로 비동기 작업 처리하기

Redux Toolkit의 **createAsyncThunk**를 사용하면 비동기 작업을 간단하게 처리할 수 있습니다.

비동기 작업 예제: 데이터 가져오기

Thunk 정의

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

export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    return response.json();
  }
);

const postsSlice = createSlice({
  name: 'posts',
  initialState: { posts: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export default postsSlice.reducer;

 

React 컴포넌트에서 사용

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

function Posts() {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [dispatch, status]);

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'failed') return <p>Error loading posts</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;

 

5. Redux Toolkit vs Redux 비교

특징	Redux Toolkit	Redux
코드 작성량	간결하고 직관적	보일러플레이트 코드가 많음
비동기 작업 처리	createAsyncThunk로 간단히 처리	Thunk 또는 Saga를 추가 설정해야 함
설정 과정	자동 설정 (configureStore)	수동 설정 필요
유지보수	코드 간결성으로 인해 쉬움	보일러플레이트로 인해 복잡해질 수 있음

 

 

Redux Toolkit은 Redux의 모든 기능을 간단하고 직관적으로 사용할 수 있게 만들어줍니다.
이번 글을 참고하여 Redux Toolkit으로 더 효율적인 애플리케이션을 개발해보세요!