Redux Toolkit 활용 실습(2): 성능 개선

Redux Toolkit을 사용한 성능 개선 방법

이번 포스팅에서는 Redux Toolkit을 사용하여 Redux의 성능을 개선하는 방법을 설명합니다. 특히 createSlice, configureStore, useSelector, createAsyncThunk, Reselect 등을 사용하여 기존 방식과 비교하여 얼마나 성능을 최적화할 수 있는지를 Before -> After 형식으로 알아보겠습니다.

1. 성능 최적화의 필요성

Redux를 사용하는 애플리케이션은 전역 상태가 자주 변경될 경우 성능 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 Redux Toolkit을 도입하여 성능 최적화를 도모합니다. 이제 각 기능을 Before -> After 형식으로 설명합니다.

 

Before: 기존 Redux 방식의 성능 문제

기존 Redux 설정에서는 모든 상태 변경이 발생할 때마다 관련 컴포넌트가 다시 렌더링될 수 있습니다. 특히 상태를 효율적으로 구독하지 않거나 불필요한 리렌더링이 발생하는 경우가 많습니다.

1. React 애플리케이션 생성 먼저 React 애플리케이션을 생성합니다.

   npx create-react-app my-redux-app
   cd my-redux-app

   
   
2. 복잡한 스토어 설정과 미들웨어 추가 기존 방식에서는 스토어 설정 시 DevTools나 미들웨어를 직접 추가해야 합니다.

   // src/store/store.js
   import { createStore, applyMiddleware } from 'redux';
   import { composeWithDevTools } from 'redux-devtools-extension';
   import thunk from 'redux-thunk';
   import rootReducer from '../reducers';
   
   const store = createStore(
     rootReducer,
     composeWithDevTools(applyMiddleware(thunk))
   );
   
   export default store;

3. 상태 구독 시 불필요한 리렌더링 문제 connect나 mapStateToProps를 사용하여 상태를 구독할 때, 필요하지 않은 상태까지 구독하여 성능이 저하될 수 있습니다.

After: Redux Toolkit을 사용한 성능 최적화

Redux Toolkit을 사용하여 복잡한 설정 과정을 간소화하고, 각 기능을 사용하여 성능을 최적화하는 방법을 알아보겠습니다.

1. React 애플리케이션 생성 먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.

   npx create-react-app my-redux-toolkit-app
   cd my-redux-toolkit-app

2. createSlice로 상태 관리 간소화 및 불필요한 리렌더링 방지 createSlice를 사용하여 상태 관리를 간소화하고 리듀서와 액션을 함께 정의하여 코드의 복잡성을 줄입니다.

   // src/features/counter/counterSlice.js
   import { createSlice } from '@reduxjs/toolkit';
   
   const counterSlice = createSlice({
     name: 'counter',
     initialState: {
       count: 0,
     },
     reducers: {
       increment: (state) => {
         state.count += 1;
       },
       decrement: (state) => {
         state.count -= 1;
       },
     },
   });
   
   export const { increment, decrement } = counterSlice.actions;
   export default counterSlice.reducer;

3. configureStore로 DevTools 및 미들웨어 설정 최적화 configureStore를 사용하면 기본적으로 DevTools와 미들웨어가 설정되어 있어 별도의 설정 없이도 사용이 가능합니다.

   // src/app/store.js
   import { configureStore } from '@reduxjs/toolkit';
   import counterReducer from '../features/counter/counterSlice';
   
   const store = configureStore({
     reducer: {
       counter: counterReducer,
     },
   });
   
   export default store;

4. useSelector로 필요한 상태만 구독하여 최적화 useSelector를 사용하여 컴포넌트에서 필요한 상태만 선택적으로 구독함으로써 불필요한 리렌더링을 줄일 수 있습니다.

   // src/components/Counter.js
   import React from 'react';
   import { useSelector, useDispatch } from 'react-redux';
   import { increment, decrement } from '../features/counter/counterSlice';
   
   function Counter() {
     const count = useSelector((state) => state.counter.count);
     const dispatch = useDispatch();
   
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={() => dispatch(increment())}>Increment</button>
         <button onClick={() => dispatch(decrement())}>Decrement</button>
       </div>
     );
   }
   
   export default Counter;

5. createAsyncThunk를 활용한 비동기 액션 최적화 createAsyncThunk를 사용하여 비동기 작업을 간단하게 관리할 수 있으며, 상태 관리가 더욱 직관적입니다.

   // src/features/user/userSlice.js
   import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
   
   export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
     const response = await fetch(`/api/user/${userId}`);
     return response.json();
   });
   
   const userSlice = createSlice({
     name: 'user',
     initialState: {
       user: null,
       status: 'idle',
     },
     reducers: {},
     extraReducers: (builder) => {
       builder
         .addCase(fetchUser.pending, (state) => {
           state.status = 'loading';
         })
         .addCase(fetchUser.fulfilled, (state, action) => {
           state.status = 'succeeded';
           state.user = action.payload;
         })
         .addCase(fetchUser.rejected, (state) => {
           state.status = 'failed';
         });
     },
   });
   
   export default userSlice.reducer;

6. Reselect을 사용한 셀렉터 성능 최적화 Reselect을 사용하여 메모이제이션된 셀렉터를 생성함으로써, 상태 변경이 있을 때 불필요한 계산을 방지하고 성능을 개선할 수 있습니다.이 셀렉터를 사용하면 상태가 변경될 때마다 불필요한 계산을 방지할 수 있습니다.

   // src/selectors/counterSelectors.js
   import { createSelector } from 'reselect';
   
   const selectCounter = (state) => state.counter;
   
   export const selectCount = createSelector(
     [selectCounter],
     (counter) => counter.count
   );

 

전체 소스 및 세부 절차 보기

 

요약

• 기존 방식: 복잡한 스토어 설정, 비동기 액션 처리의 어려움, 상태 구독의 비효율성 등으로 인해 성능이 저하될 수 있었습니다.
• Redux Toolkit 방식: createSlice, configureStore, useSelector, createAsyncThunk, Reselect 등을 사용하여 코드의 복잡성을 줄이고 성능을 최적화할 수 있었습니다.

실습 코드 요약

• 기존 방식에서 발생할 수 있는 성능 문제를 해결하기 위해 Redux Toolkit의 다양한 도구들을 사용하여 최적화할 수 있었습니다.
• 이러한 도구들을 사용하면 코드가 간결해지고 유지보수가 쉬워지며, 성능도 크게 향상됩니다.