최근 웹 애플리케이션에서는 많은 양의 데이터를 처리하고 상태를 관리해야하는 경우가 많습니다. 이를 위해 Redux를 사용하여 앱의 상태를 효율적으로 관리하면서도 코드의 복잡성을 줄일 수 있습니다. Redux Toolkit은 Redux를 보다 쉽게 사용할 수 있도록 하는 고급 도구입니다.

하지만 Redux만으로는 앱의 데이터를 캐싱하여 쿼리 성능을 향상시키는 일은 어렵습니다. 따라서 Redux Toolkit과 함께 사용하는 기술인 reselect과 redux-persist를 이용하여 데이터의 캐시 관리를 개선할 수 있습니다.

reselect을 사용한 캐싱

reselect은 Redux에서 사용하는 셀렉터(selector)를 만들어 주는 라이브러리입니다. 셀렉터는 Redux 상태를 읽고 변환하여 파생된 데이터를 생성하는 함수입니다. 이를 사용하면 동일한 입력에 대해 동일한 출력을 반환하여 앱의 성능을 개선할 수 있습니다. 또한, 셀렉터는 이전 결과를 캐시하여 중복된 계산을 피할 수 있습니다.

예를 들어, 사용자 리스트를 가져오는 API 호출 결과를 캐시하고 싶다고 가정해봅시다. Redux Toolkit을 사용하면 API 호출을 실행하는 액션을 정의할 수 있습니다. API 호출이 성공하면 액션 페이로드에 결과를 저장하고, 상태를 업데이트하는 방식입니다. 이때 createSelector 함수를 사용하여 이전 결과를 캐시하고, 동일한 API 호출에 대해서는 이전 결과를 반환하도록 할 수 있습니다.

import { createSelector } from 'reselect';

const getUsers = (state) => state.users;
const getCachedUsers = createSelector(
  getUsers,
  (users) => users
);

// somewhere in the component
const users = useSelector(getCachedUsers);

위의 예제에서 getUsers는 Redux 상태에서 사용자 목록을 가져오는 함수입니다. createSelector를 사용하여 getUsers 결과를 캐시하는 getCachedUsers 선택자를 만들었습니다. 이후 컴포넌트에서 useSelector 훅을 이용해 getCachedUsers를 호출하면, 이전에 캐시된 결과를 반환받을 수 있습니다.

redux-persist를 사용한 상태 지속성

redux-persist는 Redux 상태를 지속하는 라이브러리로, 애플리케이션을 새로고침하거나 재시작할 때 상태가 유지되도록 할 수 있습니다. 이를 사용하면 사용자의 작업을 저장하고 복구할 수 있으며, 앱의 사용자 경험을 향상시킬 수 있습니다.

Redux Toolkit과 redux-persist를 함께 사용할 때는 persistReducer와 persistStore 함수를 사용하여 저장되어야 할 상태를 정의하고, 저장소를 구성합니다. 이후 Redux의 createStore 함수에 구성한 persistedReducer를 전달하여 지속 가능한 상태로 만들 수 있습니다.

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware(),
});

const persistor = persistStore(store);

export { store, persistor };

위의 예제에서 reducers는 모든 리듀서가 결합된 루트 리듀서입니다. persistConfig는 redux-persist에 필요한 구성 객체입니다. persistReducer 함수를 사용하여 persistedReducer를 생성하고, configureStore 함수에서 persistedReducer를 사용하여 스토어를 구성합니다.

이렇게 구성한 스토어를 persistStore 함수에 전달하여 지속 가능한 상태를 유지하도록 할 수 있습니다.

결론

Redux Toolkit을 사용하면 애플리케이션의 상태를 효율적으로 관리할 수 있습니다. 그러나 Redux 만으로는 데이터의 캐싱과 지속성을 관리하기 어려울 수 있습니다. 이를 위해 reselect과 redux-persist를 함께 사용하여 데이터의 캐시 관리와 상태의 지속성을 개선할 수 있습니다. 이러한 기술을 활용하여 최적화된 Redux 앱을 개발할 수 있습니다.

#Redux #ReduxToolkit #Caching #Reselect #ReduxPersist