자바스크립트 Redux Toolkit을 이용한 애플리케이션 성능 최적화 방법

21 Sep 2023

redux

애플리케이션의 성능은 사용자 경험과 전반적인 품질에 큰 영향을 미칩니다. 특히 대규모 애플리케이션에서는 성능 문제가 자주 발생하며, 이를 해결하기 위해 Redux Toolkit과 같은 도구를 사용할 수 있습니다. 이번 포스트에서는 Redux Toolkit을 활용하여 자바스크립트 애플리케이션의 성능을 최적화하는 방법에 대해 살펴보겠습니다.

1. 메모이제이션(Memoization) 사용하기

Redux Toolkit은 Reselect과 같은 라이브러리를 지원하여 메모이제이션을 손쉽게 구현할 수 있습니다. 메모이제이션은 이전에 계산한 값을 캐시하여 동일한 입력이 주어졌을 때 연산을 다시 수행하지 않고 이전에 캐싱한 값을 반환하는 기법입니다. 메모이제이션을 활용하면 중복 계산을 피하고 성능을 향상시킬 수 있습니다.

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

const selectUserData = (state) => state.userData;

// 메모이제이션 사용하기
export const selectUserName = createSelector(
  selectUserData,
  (userData) => userData.name
);

2. 불필요한 렌더링 방지하기

React와 Redux를 함께 사용하는 경우, Redux의 상태 변화에 따라 컴포넌트가 불필요하게 다시 렌더링될 수 있습니다. 이를 방지하기 위해 Redux Toolkit은 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;
    },
  },
});

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

3. 비동기 작업 최적화하기

Redux Toolkit은 비동기 작업에 자주 사용되는 Redux Thunk와 같은 미들웨어를 지원합니다. Redux Thunk를 활용하면 비동기 작업을 보다 쉽게 처리할 수 있으며, 성능 최적화를 위해 다음과 같은 사항을 고려할 수 있습니다.

비동기 작업을 병렬로 처리하여 응답 속도를 개선합니다.
중복 요청을 방지하고 캐싱을 활용하여 불필요한 네트워크 요청을 최소화합니다.
적절한 로딩 상태를 관리하여 사용자 경험을 향상시킵니다.

import { createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUserInfo } from '../api/userApi';

// 비동기 작업 최적화하기
export const getUserInfo = createAsyncThunk(
  'user/fetchUserInfo',
  async (userId, thunkAPI) => {
    const response = await fetchUserInfo(userId);
    return response.data;
  }
);

#redux #performance #자바스크립트