프로젝트를 진행하던 중 회원정보가 전역으로 사용되어야해서 Redux로 상태를 관리하였다. 하지만 새로고침하면 저장되었던 정보가 초기화 된다? 이게 뭐지싶었다.
초기화되는 이유를 알아보고 해결방법 중 한가지인 Redux Persist에 대해 알아보자.
Redux 상태가 새로고침시 초기화 되는 이유
리덕스는 메모리 내에서 상태를 관리하게 된다. 그래서 새로고침을 하면 브라우저의 메모리가 초기화되기 때문에 리덕스 스토어의 상태도 사라지는 것이다. 따라서 리덕스 미들웨어를 사용하거나 Redux Persist 라이브러리를 활용할 수 있다. 이번에는 Redux Persist을 사용해보았다.
Redux Persist
리덕스 상태를 지속적으로 저장하고 복원하기 위한 라이브러리이다. 로컬 스토리지나 세션 스토리지에 저장하여 페이지가 새로고침 되어도 상태를 유지할 수 있게 해준다.
설치
npm install redux-persist
개념
- persistReducer: 상태를 로컬 스토리지에 저장할 수 있도록 rootReducer를 감싸는 역할
- persistStore: 상태를 로컬 스토리지에서 불러오고 저장소를 생성
- persistGate: 상태를 복원할 때까지 대기하는 동안 로딩 컴포넌트를 표시
// 기본 설정
import { createStore } from 'redux';
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 = createStore(persistedReducer);
const persistor = persistStore(store);
// 스토어 사용
import { PersistGate } from 'redux-persist/integration/react';
function App() {
return (
<PersistGate loading={null} persistor={persistor}>
<YourComponent />
</PersistGate>
);
}문제 상황 1
로그인할 때 상태를 로컬 스토리지에 저장하였다. 근데 이메일, 비밀번호를 잘못 입력시에 보여주는 에러메시지는 새로고침하면 사라져야한다. (에러메시지도 기본 상태에서 관리되는 필드 - error)
해결
const persistConfig = {
key: 'root',
storage,
blacklist: ['error'], // 'error' 상태를 persist하지 않도록 설정
};- blacklist: 특정 리덕스 스토어의 상태를 로컬 스토리지에 저장하지 않도록 설정하는 기능.
즉, 새로고침 시 저장되지않고 항상 초기 상태로 돌아간다. - 활용 사례: 사용자 입력을 받는 폼의 상태처럼 임시로 필요한 데이터는 저장할 필요가 없을 때, 특정 상태가 항상 초기 상태로 시작해야하는 경우
따라서 error 상태는 이메일이나 비밀번호가 틀렸을 경우에만 보여줘야하므로 저장할 필요가 없어서 blacklist 기능을 사용하였다.
문제 상황2
로컬 스토리지에 저장된 isAuthentication(권한의 유뮤를 boolean 값으로 표현)가 중복되어 출력하는 문제 즉, boolean 값이 로컬 스토리지에 문자열로 저장되는 문제이다.
정리하자면,
1. 로컬 스토리지의 저장 방식: 로컬 스토리지는 모든 데이터를 문자열로 저장
2. 상태 복원 방법: Redux Persist는 상태를 복원할 때 문자열로 저장된 그대로 사용하게 되어 타입이 일치하지 않는 문제가 발생하여 중복 출력이 발생할 수 있다.
해결
stateReconciler를 사용하여 inboundState에서 복원된 상태를 처리하고 isAuthenticated의 값을 boolean 타입으로 변환한다.
const persistConfig = {
key: 'root',
storage,
blacklist: ['error'], // 'error' 상태를 persist하지 않도록 설정
// 사용자 데이터를 다시 불러올 때 boolean으로 변환
stateReconciler: (inboundState, originalState, reducedState) => {
// inboundState: 로컬 스토리지에서 복원된 상태
// originalState: Redux스토어의 현재 상태
// reducedState: 리듀서에서 반환된 상태
if (inboundState && inboundState.currentUser) {
// isAuthenticated 값이 string이면 boolean으로 변환
inboundState.currentUser.isAuthenticated =
inboundState.currentUser.isAuthenticated === 'true' ? true : false;
}
return reducedState;
},
};마무리하며
Redux의 사용법에 대해 한가지 더 알게 되었다. 전역으로 상태를 관리하지만 메모리에 저장되어 새로고침시 그 상태가 초기화된다. 이 상태를 로컬 스토리지나 세션 스토리지에 저장해야지만 그 상태값을 사용할 수 있다. 이번에는 Redux Pesiste 방법을 사용해봤지만 더 공부해서 다음에는 다른 방법도 적용해보아야겠다.
출처 및 참고
1. https://www.npmjs.com/package/redux-persist
2.https://velog.io/@bcl0206/%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%ED%9B%84%EC%97%90%EB%8F%84-store-state-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-Redux-persist
