Redux 제대로 공부하기 - redux-persist

in Study

React에 Redux를 적용하기 위한 공부

redux를 soapple님의 [Redux]강의를 들으면서 정리한 내용이다.

topic 🚀

  1. Persist
    • 1-1. Storage 종류
  2. redux-persist
  3. 데이터의 저장 및 복원 과정
  4. redux-persist 사용 방법

Persist

Persist란 지속하다는 의미로, 상태를 저장장치에 영구저장하는 것을 의미한다. 직접 상태를 삭제하지 않는 이상, 프로세스가 재시작되어도 저장장치에 남아있게 된다.

Storage 종류

브라우저에 Persist 기능이 있는데 Web Storage API이다. Web Storage API에는 LocalStorage, SessionStorage가 있다.

Local Storage
  1. 데이터 영구저장
  2. 접속한 도메인 + 프로토콜에 대해서 각기 다른 Storage 객체를 리턴
Session Storage
  1. 데이터 세션 종료시 사라짐
  2. 접속한 도메인 + 프로토콜+ 세션에 대해서 각기 다른 Storage 객체를 리턴

redux-persist

Redux도 이와같은 persist 기능을 사용할 수 있는 redux-persist라이브러리가 있다. LocalStorage,SessionStorage와 같은 다양한 Storage Engine을 지원한다.

데이터의 저장 및 복원 과정

데이터의 저장 및 복원 과정과 관련하여 serialize(직렬화),deserialize(역직렬화)의 용어가 있다.

데이터를 저장할 때, Redux의 관점에서 보면 state는 JavaScript Object이므로 storage에 저장하기위해서는 문자열로 변환해야한다. 이 과정을 serialize(직렬화)라고 한다.

사진에서 보이는 것처럼 serialize는 기존에 있던 상태를 저장할 수 있는 상태로 변화하는 것이다라는 의미로 이해하면 된다.

데이터를 복원(hydrate)할때는, 이미 serialize시킨 데이터를 원래의 형태로 복원해야한다. 이를 deserialize(역직렬화)라고 한다.

이렇게 redux-persist에서 데이터를 serialize,deserialize해주는 행위를 transform이라고한다. 이와 관련하여 Redux에는 다양한 transform 플러그인이 존재한다.

https://gyoogle.dev/blog/computer-science/data-structure/Trie.html

redux-persist 사용 방법

redux-persist를 사용하는 방법은 다음과 같다.

  1. Storage Engine 을 선택한다.
    • localStorage,sessionStorage등등 중에서 선택한다.
  2. redux-persist 설정환경 객체인 persistConfig 생성한다.
  3. Redux Store에 persistedReducer를 연동한다.
  4. 최상위 컴포넌트를 Provider 컴포넌트 하위에 PersistGate 컴포넌트로 감싸준다.