Redux Persist: 상태를 유지하는 완벽한 방법

Redux에서 상태를 관리하는 것은 매우 유용하지만, 애플리케이션이 새로고침되면 상태가 초기화되는 문제가 있습니다.
Redux Persist는 이 문제를 해결하기 위한 도구로, 상태를 로컬 스토리지(LocalStorage) 또는 세션 스토리지(SessionStorage)에 저장하여 애플리케이션이 새로고침되더라도 상태를 유지할 수 있도록 도와줍니다.

이번 글에서는 Redux Persist의 기본 개념, 설치 방법, 그리고 사용 예제를 소개하겠습니다. 😊

 

1. Redux Persist란?

Redux Persist는 Redux 상태를 브라우저 스토리지에 저장하고 복원해주는 라이브러리입니다.
이를 통해 사용자는 새로고침, 브라우저 종료 후에도 상태를 유지할 수 있습니다.

주요 특징

1. 스토리지 지원
   • LocalStorage, SessionStorage, AsyncStorage 등 다양한 스토리지 사용 가능
2. 상태 복원
   • 애플리케이션이 시작될 때 저장된 상태를 자동으로 복원
3. 유연한 설정
   • 특정 리듀서만 저장하거나 제외 가능

 

 

2. Redux Persist 설치

npm install redux-persist

 

3. Redux Persist 설정

1) Persist Reducer 생성

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 로컬 스토리지 사용
import { combineReducers } from 'redux';

// 리듀서
const userReducer = (state = { name: '', loggedIn: false }, action) => {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, name: action.payload, loggedIn: true };
    case 'LOGOUT':
      return { ...state, name: '', loggedIn: false };
    default:
      return state;
  }
};

// persist 설정
const persistConfig = {
  key: 'root',
  storage, // LocalStorage에 저장
  whitelist: ['user'], // 저장할 리듀서를 지정
};

const rootReducer = combineReducers({
  user: userReducer,
});

export const persistedReducer = persistReducer(persistConfig, rootReducer);

 

2) Redux Store 설정

import { createStore } from 'redux';
import { persistStore } from 'redux-persist';
import { persistedReducer } from './reducers';

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

 

3) Redux Persist Provider 설정

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<p>로딩 중...</p>} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

 

 

4. Redux Persist 동작 예제

상태 업데이트 액션

export const login = (name) => ({
  type: 'LOGIN',
  payload: name,
});

export const logout = () => ({
  type: 'LOGOUT',
});

 

상태 확인 및 업데이트

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { login, logout } from './actions';

function UserProfile() {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  return (
    <div>
      {user.loggedIn ? (
        <>
          <h1>안녕하세요, {user.name}님!</h1>
          <button onClick={() => dispatch(logout())}>로그아웃</button>
        </>
      ) : (
        <>
          <h1>로그인해주세요</h1>
          <button onClick={() => dispatch(login('홍길동'))}>로그인</button>
        </>
      )}
    </div>
  );
}

export default UserProfile;

 

5. 유용한 설정들

특정 리듀서 제외하기

blacklist 옵션을 사용해 특정 리듀서를 제외할 수 있습니다:

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['temporaryData'], // 이 리듀서는 저장하지 않음
};

저장된 데이터 지우기

사용자가 로그아웃할 때 상태를 초기화하려면 persistor.purge()를 호출합니다:

import { persistor } from './store';

function handleLogout() {
  persistor.purge();
}

6. 실생활 비유로 이해하기

Redux Persist는 저장 창고와 비슷합니다:

1. Redux 상태 → 창고에 저장
2. 애플리케이션 시작 → 창고에서 꺼내와서 사용
3. 특정 데이터만 저장 또는 제외 → 창고의 정리된 섹션

 

Redux Persist를 사용하면 애플리케이션의 상태를 새로고침 이후에도 유지할 수 있어 사용자 경험이 크게 향상됩니다.