redux는 이미 많은 개발자가 사용하는 상태 관리 라이브러리이다.
React의 상태 관리 라이브러리는 한 가지 고려할 점이 있는데, 일반적인 상태와 같이 새로고침 시 상태가 사라진다.
이것을 해결하기 위해서 local 또는 session 을 사용해서 reducer를 저장해서 새로고침 시 데이터를
redux에 가져올 수 있다.
다음과 같은 기능을 redux-persist가 제공해준다.
설치
yarn add @reduxjs/toolkit react-redux redux-persist
reduxjs/toolkit과 react-redux는 redux를 사용하기 위해서 설치했고 redux-persist는 따로 설치해야 한다.
만약 타입스크립트를 사용한다면,
yarn add -D @types/redux-persist
추가로 설치해주면 된다.
persist Store 정의
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import storageSession from "redux-persist/lib/storage/session";
import Counter from "./counter";
import User from "./user";
const reducers = combineReducers({
counter: Counter.reducer,
user: User.reducer,
});
const persistConfig = {
key: "root",
storage: storageSession,
whitelist: ["user"],
};
export const store = configureStore({
reducer: persistReducer(persistConfig, reducers),
devTools: process.env.NODE_ENV !== "production",
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({ serializableCheck: false }),
});
export const persistor = persistStore(store);
전체적으로는 redux 세팅과 동일하지만 다른 부분이 있다.
const persistConfig = {
key: "root",
storage: storageSession,
whitelist: ["user"],
};
persist store의 설정을 나타낸다.
key는 storage에 저장되는 key 명칭을 의미하고, storage는 local과 session을 설정할 수 있다.
만약 localStorage에 저장하고 싶다면
import storage from 'redux-persist/lib/storage
sessionStorage의 경우에는
import storageSession from 'redux-persist/lib/storage/session
를 불러와서 넣어주면 된다.
whitelist의 경우 허용하는 reducer를 지정하는 것이며, blacklist도 설정이 가능하다.
blacklist는 해당하는 reducer만 제외하고 저장하는 것이다.
export const store = configureStore({
reducer: persistReducer(persistConfig, reducers),
// ...
});
reducer들을 하나의 Root Reducer로 합쳐주는 configureStore에서 reducer 부분을 persistReducer로 설정과
함께 추가한다.
persistReducer는 redux-persist와 리덕스모듈 정보를 종합해서 persist 정보를 반환한다.
export const persistor = persistStore(store);
마지막으로 persistStore는 persist 전용 store를 만들기 위해서 사용한다.
정의된 store 내용에 따라 리덕스 데이터를 유지시킬 수 있는 리덕스 스토어를 생성한다.
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import Home from "./pages/home";
import { persistor, store } from "./redux/store";
function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Home />
</PersistGate>
</Provider>
);
}
export default App;
이제 persist를 설정한다.
<PersistGate loading={null} persistor={persistor}>
// ...
</PersistGate />
PersistGate는 리덕스 스토어에 유지시키고자 하는 데이터를 문제없이 저장하고 불러올 수 있도록
UI 렌더링을 지연시키는 역할을 한다.
여기서 사용되는 loading은 UI 렌더링의 지연시간을 나타낸다.
null 또는 ms 단위로 설정할 수 있다. loading={1000}을 할 경우 1초 뒤에 UI가 렌더링된다.
실행
persist로 지정한 데이터는 애플리케이션에서 확인이 가능한데,
다음과 같이 데이터가 저장되어 있다.
'React > 실험실' 카테고리의 다른 글
[React] swiper 부드럽게 흐르는 슬라이드 (0) | 2023.03.15 |
---|---|
[React] useForm (0) | 2023.03.05 |
[React] Compound Component 패턴 (1) | 2023.02.04 |
[React] Context Module Function 패턴 (0) | 2023.02.02 |
[React] Context API 언제 사용해야할까? (0) | 2023.01.31 |
댓글