[Redux] Redux Persist VS Local storage

 

오늘 토이 프로젝트에서 Firebase 구글 로그인 기능을 구현하고 흐뭇한 마음으로 이런저런 버튼을 클릭을 하고 있을 때였다.

 

새로고침 버튼을 누르니 로그인 상태가 풀려버리는 것이었다...!

 

아차 싶었다. 로그인 상태를 Redux state에 유저정보와 함께 저장해 관리하려고 했는데 생각해보니 Redux는 새로고침과 동시에 모든 State를 초기화한다는 사실을 깜빡했다. 

 

문제 해결에는 두 가지 방안이 있다. 하나는 Redux-persist 라이브러리를 이용해 Redux State를 초기화되지 않고 유지할 수 있도록 해주는 방법이고 다른 하나는 local storage를 이용해 상태를 기록하는 것이다. (물론 Rest api를 이용해 서버로부터 계속 정보를 받아오는 방법도 있겠지만 이는 배제하도록 하겠다.)

 

그렇다면 Redux persist와 local storage의 차이점은 무엇일까? 사실 둘다 local storage를 사용한다는 점에서 근본적으로 다르진 않다. Redux persist도 결국 local storage를 redux에서 활용할 수 있도록 해주는 것이기 때문이다. 

 

해외 블로그 중에 관련되어서 잘 설명된 블로그가 있어 번역해 옮겨 본다. 

 

Redux Persist vs LocalStorage

 

이 둘의 간단한 설명부터 해보자.

 

Redux Persist - Redux Persist는 redux 상태를 지속하는 저장소에 저장한다. (local storage, session storage 등)

Local Storage - Local Storage는 만료일자 없이 브라우저가 키-밸류 페어를 저장할 수 있도록 하는 속성이다. 즉 브라우저가 닫힌 이후에도 데이터는 보관된다. 

---

아래는 Redux Persist의 장점들이다. 

1. Redux Persist의 최고 장점은 상태를 전달받거나 저장할때까지 렌더링을 지연시키는 PersisGate를 제공한다는 것이다. 이때 데이터를 전달 받을 때까지 로딩 컴포넌트를 보여주는 방법을 이용 할 수 있다. 

2. 또 다른 좋은 점은 블랙리스트와 화이트리스트 기능을 제공한다는 점이다. 이를 통해 어떤 상태를 유지하고 유지하지 않을 지 결정할 수 있다. 

3. Redux Persist는 변형이 가능하다. 객체를 보관하고 복구할 수 있다. 이를 이용해 객체를 암호화하고 필터링하고 만료 기간을 설정하고나 압축 등을 할 수 있다. 

4. 여러가지 다른 스토리지 엔진을 제공한다. - 로컬 스토리지, 세션 스토리지, 비동기 스토리지 등

5. State Reconciler는 수신되는 상태값을 얉은 수준이나 깊은 수준에 따라 어떻게 복구하고 합칠지 결정할 수 있는 옵션을 제공한다. 

6. 그리고 persistReducer 그리고 persistStore 와 같이 상태를 저장하고 호출할 수 있는 다양한 커스텀 함수를 제공한다. 

 

그렇다면 왜 Redux Persist가 필요할까요?

실제 어플을 제작한다면 위의 기능들 중 적어도 3~4개의 기능이 필요할 것이다. 탭을 종료하거나 새로고침할 때 상태를 다시 복구해야 할 때가 있다. 때때로 로컬스토리지에 저장하는 데이터를 암호화 해야 할 때도 있다. 그리고 원하는 데이터를 어플리케이션이 받을 때 까지 로딩화면을 보여야 할 때도 있다. 또한 가능한 시나리오중에 20개의 상태중에 5개의 상태만 영구적으로 보관해야 할 경우와 모든 상태가 서로 상호의존적일 경우도 있다. 이럴 경우 Redux Persist를 사용하면 이상적인 답을 찾을 수 있다. 다량의 패키리를 설치하지 않아도 되기 때문이다. 

 

하지만 여전히 직접 localStorage에 저장할 수 있잖아요?

위에 나열된 기능이 필요하지 않다면 그렇다. 만약 어플리케이션이 굉장히 작거나 1개 혹은 2개의 상태만이 영속적으로 유지될 필요가 있거나 서로 상호 의존적이지 않다면 직접 저장해도 된다. 

 

 

출처: https://saubhagya-ashish.medium.com/redux-persist-vs-localstorage-64771adb762b

Redux Persist vs LocalStorage