저번 글에서 react-redux를 알아보았다.. 그러나 react-redux를 사용하더라도, 페이지를 새로고침할 경우 저장하고 있던 데이터들이 초깃값으로 돌아간다
만약, 쇼핑몰의 장바구니, 다크모드 등 개인정보 유출에는 크게 문제 없는 부분들은 브라우저에서 계속 저장할수는 없을까 ??
먼저 Web에 데이터를 저장할 수 있는 방법 3가지와 데이터가 삭제되는 시점을 알아보자 😢
Local Storage
: 직접 삭제가 필요Session Storage
: 윈도우 혹은 브라우저 탭을 종료할 경우 삭제Cookies
: 만료기간이 있으며 만료기간이 지난 후에만 삭제
📌 자세한 내용은 해당 Github에서 알아볼 수 있다
설치
npm install redux-persist
// configureStore.js
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
//import storageSession from 'redux-persist/lib/storage/session
import rootReducer from './reducers'
const persistConfig = {
key: 'root',
storage,
//storageSession,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
let store = createStore(persistedReducer)
let persistor = persistStore(store)
return { store, persistor }
}
localStorage
에 저장하고 싶은 경우 import storage from 'redux-persist/lib/storage'
를 사용한다
SessionStorage
에 저장하고 싶은 경우 import storageSession from 'redux-persist/lib/storage/session'
를 사용한다
rootReducer
란 내보낸 모든 reducer들을 가져온다
store
는 reudx의 Provider의
속성으로 넣기 위해 내보내고, persistor
는 redux persist의 PersistGate
의 속성으로 넣기 위해 내보낸다
import { PersistGate } from 'redux-persist/integration/react'
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RootComponent />
</PersistGate>
</Provider>
);
};
PersistGate
를 감싸 주어야하며, persistor
에는 위에서 내보낸 persistor
를 사용한다사용화면
- 로그인 정보를 담아 사용해보면 개발자 도구에서
Application
탭에서 확인이 가능하다
여기까지 간단하게
Redux-Persist
의 사용방법을 알아보았다 자세한 내용은 역시 Github에서 확인하는 것이 확실하고, 사실 로그인정보를 이렇게 저장하는 것이 맞는가에 대한 해답은 아직 찾지 못하였다. 그러나 꼭 로그인이 아니더라도 웹에 데이터를 저장해야하는 경우 유용하게 사용가능할 것 같다 🥲👍🏻