서론
Redux가 크게 필요하진 않은 서비스라 하더라도 절대 피해갈 수 없는 한 가지가 있다.
바로 회원 인증 및 인가이다. 로그인을 요구하지 않는 페이지가 얼마나 되는가.
모든 페이지가 회원 인증 및 인가를 필요로한다고 해도 과언이 아니다.
이 중에서도 인가 를 구현하는 것은 참으로 까다로운 일이다. 회원의 정보를 세션 방식이든 JWT 방식이든 어떠한 회원과 관련된 정보를 가지고 계속 확인을 해야하기 때문이다.
이런 것을 용이하게끔 해주는 것이, 리덕스가 될 것이다. 리덕스는 한 번 받아온 회원 정보를 저장하여 프로젝트의 전역에서 사용할수 있도록 도와준다.
하지만 처음 리덕스를 구현하다보면 한 가지 딜레마에 빠지게된다. 새로고침하면 저장됐던 정보가 초기화되는 것.
이 단점을 보완할 수 있는 redux의 기능 Redux persist에 대해서 포스팅하고자한다.
Redux persist 란?
Redux Persist는 리덕스 상태를 지속적으로 저장하고 복원하기 위한 라이브러리다. 이를 통해 웹 애플리케이션을 새로고침하거나 세션을 종료한 후에도 사용자의 상태를 유지할 수 있다.
Redux Persist는 주로 웹 애플리케이션에서 사용되지만, 리액트 네이티브 앱과 같은 다른 플랫폼에서도 사용할 수 있다고 한다.
Redux Persist는 Redux와 함께 사용되며, Redux의 스토어(store) 구성하여 사용된다. persistStore 함수는 Redux Persist가 스토어를 구성하고 상태를 지속시키는 데 사용되는 핵심 함수이다.
Redux persist 사용법
Redux Persist의 사용법은 다음과 같다
1. Redux Persist를 설치한다.
```
npm install redux-persist
or
yarn add redux-persist
```2. Redux Persist의 구성 객체를 생성한다. 보통 `persistConfig`라는 이름으로 변수를 만든다.
이 객체에는 몇 가지 옵션이 포함된다. 가장 중요한 옵션은 key와 storage이다.
key는 저장된 데이터를 식별하는 데 사용되는 고유 키다.
storage는 Redux 상태를 저장할 방법을 지정한다 (ocalStorage, AsyncStorage, IndexedDB 등 다양한 저장소를 사용할 수 있다.)
// store.js
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // localStorage를 사용할 경우
const persistConfig = {
key: 'root',
storage: storage,
};3. Redux의 `리듀서(reducer)`를 **Redux Persist에 연결하는 래퍼(reducer wrapper)** 를 생성합니다. `persistReducer 함수`를 사용하여 수행한다.
// store.js
import { persistReducer } from 'redux-persist';
const persistedReducer = persistReducer(persistConfig, rootReducer);4. persistStore 함수를 사용하여 스토어를 구성하고 상태를 지속시킨다. 이 함수는 Promise를 반환한다. persistor 객체를 사용하여 리덕스 상태를 지속시키고, 지속 상태를 복원하고, 상태의 저장과 복원에 관련된 다양한 기능을 제공한다.
// store.js
import { persistStore } from 'redux-persist';
import { createStore } from 'redux';
const store = createStore(persistedReducer);
const persistor = persistStore(store);- PersistGate 컴포넌트를 사용하여 최상위 컴포넌트를 Redux Persist로 래핑한다. 이 컴포넌트는 애플리케이션 로딩 중에 리덕스 상태가 복원될 때까지 대기하도록 설정할 수 있다.
//index.js
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
const store = createStore(persistedReducer);
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);
PersistGate 컴포넌트는 loading prop을 통해 로딩 중에 보여줄 컴포넌트를 지정할 수 있다.
persistor prop에는 persistStore 함수로 생성된 persistor 객체를 전달한다. 이를 통해 리덕스 상태가 복원될 때까지 애플리케이션이 로딩되는 동안 대기하도록 설정할 수 있다.
이렇게 설정하면 Redux Persist가 리덕스 상태를 저장하고 복원하는 기능을 제공하게 된다. 애플리케이션을 새로고침하거나 세션을 종료한 후에도 이전의 사용자 상태를 복원할 수 있다.
코드 한번에 보기
아래에서 보다시피 기존의 store를 대체하는게 아니다. 둘 다 각각 쓰는 것이다.
그리고 두 함수를 모두 export 해주어서 index.js에서 사용한다.
// store.js
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 사용할 저장소 선택
import rootReducer from './reducer'; // 애플리케이션의 리듀서를 가져옵니다
const persistConfig = {
key: 'root',
storage: storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);// index.js
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'; // Redux 스토어와 persistor 가져오기
import App from './App'; // 애플리케이션의 최상위 컴포넌트
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);