Persistence를 달성하기 위해서는 데이터를 저장 장치에 저장해야만 합니다.
그렇다면 redux-persist에서는 데이터. 즉, Redux Store의 state들을 어떻게 저장하고 관리할까요?

지금부터 웹브라우저에서 데이터를 저장할 수 있도록 해주는 Storage에 대해서 알아보도록 하겠습니다.

13.3.1 Web Storage API

먼저 브라우저에서는 Web Storage API라는 것을 사용해서 데이터를 저장하고 불러올 수 있습니다.
이 때 저장하는 데이터의 형태는 우리가 흔히 Key/Value pair라고 부르는 키와 값의 쌍 형태가 됩니다.

이 표는 Key/Value pair 데이터의 예시를 나타낸 것입니다.
Key/Value 기반의 저장 장치에서는, 이런 형태로 고유한 Key값을 사용해서 Value를 저장하거나 가져올 수 있습니다.

한 가지 유의해야 할 점은, Key값은 고유해야 하기 때문에 이미 존재하는 동일한 Key값으로 데이터를 저장하게 되면 기존 데이터를 덮어쓰게 된다는 점입니다.

브라우저에서 사용하는 Web Storage API도 역시, 이렇게 Key / Value 기반으로 데이터를 저장하고 불러옵니다.
하지만 데이터를 저장하고 불러오기 위해서 우리가 직접 Web Storage API를 호출해서 사용하는 것은 아닙니다.
웹브라우저에서는 이러한 Web Storage API를 편하게 사용할 수 있도록 두 가지 종류의 Storage를 제공합니다.

그것은 바로 localStorage와 sessionStorage입니다.
지금부터 두 Storage의 차이점을 한 번 살펴보도록 하겠습니다.

• localStorage
  • 접속한 각 도메인 + 프로토콜에 대해서 각기 다른 Storage객체를 리턴
    • https://a.com 과 https://b.com은 다른 Storage 객체를 가짐.
    • https://a.com 과 http://a.com도 다른 Storage 객체를 가짐.
  • 데이터가 만료되지 않음
• sessionStorage
  • 접속한 각 도메인 + 프로토콜 + 세션에 대해서 각기 다른 Storage객체를 리턴
    • 같은 https://a.com을 여러 탭에서 접속할 경우, 각 탭이 다른 Storage 객체를 가짐.
  • 데이터가 세션 종료 시 만료됨

먼저 localStorage는 도메인과 프로토콜의 조합에 대해서 각기 다른 Storage 객체를 리턴합니다.
예를 들면, a.com과 b.com에 대해서 각기 분리된 Storage를 가지며, 또한 도메인 이름은 동일해도 https와 http처럼 프로토콜이 다른 경우에도 다른 Storage 객체를 가지게 됩니다.
그리고 localStorage의 데이터는 만료되지 않기 때문에 직접 삭제하지 않는 이상 데이터가 계속 유지됩니다.

그리고 sessionStorage는 도메인과 프로토콜에 추가로 세션의 조합에 대해서 각기 다른 Storage 객체를 리턴합니다.
여기서 세션은 사용자의 접속 정보를 나타내는데, 쉽게 말해서 사용자가 웹사이트에 접속해서 나갈 때까지의 시간 흐름을 의미한다고 보면 됩니다.
평소에 개발을 하다 보면 세션이 시작되었다, 세션이 종료되었다 라는 말을 아마 들어봤을 겁니다.
브라우저 입장에서는 새로운 탭을 띄울 때마다 새로운 세션이 시작되고, 탭을 닫을 때 세션이 종료된다고 이해하면 됩니다.

이처럼 sessionStorage는 각 세션에 맵핑된 Storage 객체를 리턴합니다.
그래서 여러 개의 탭에서 같은 https://a.com을 접속하면 각 탭이 다른 Storage 객체를 가지게 되고, 탭을 닫을 경우. 즉, 세션이 종료될 경우 데이터가 모두 날아가게 됩니다.

localStorage와 sessionStorage의 가장 큰 차이점은 바로 데이터의 만료 여부입니다.
localStorage는 데이터가 계속 유지되고, sessionStorage는 데이터가 세션 종료시 만료된다는 것이죠.
이 점을 잘 기억하고 각 상황에 맞게 Storage를 선택해서 사용하는 것이 중요합니다.

그럼 실제로 이 Storage들을 사용하는 예시 코드를 한 번 볼까요?

// 키와 값의 쌍을 저장
localStorage.setItem("user_id", "soaple");

// 특정 키 값의 데이터 가져오기
const userId = localStorage.getItem("user_id");

// 특정 키 값의 데이터 삭제
localStorage.removeItem("user_id");

// 모든 데이터 삭제
localStorage.clear();

이 코드는 localStorage를 사용하는 예시 코드를 나타낸 것입니다.

먼저 키와 값의 쌍을 저장하기 위해서 setItem() 함수를 사용했습니다.
그리고 특정 키 값의 데이터를 가져오기 위해서 getItem() 함수를 사용했고,
특정 키 값의 데이터를 삭제하기 위해서 removeItem() 함수를 사용했습니다.
마지막으로 localStorage의 모든 데이터를 삭제하기 위해서 clear() 함수를 사용했습니다.

다음은 sessionStorage를 사용하는 예시 코드입니다.

// 키와 값의 쌍을 저장
sessionStorage.setItem("user_id", "soaple");

// 특정 키 값의 데이터 가져오기
const userId = sessionStorage.getItem("user_id");

// 특정 키 값의 데이터 삭제
sessionStorage.removeItem("user_id");

// 모든 데이터 삭제
sessionStorage.clear();

위 코드를 보면 아시겠지만, sessionStorage에서 제공하는 함수들은 localStorage와 동일합니다.

다만 sessionStorage를 사용해서 데이터를 저장하게 되면, 세션 종료시 데이터가 날아간다는 점을 잘 기억하고 사용해야 합니다.

지금까지 살펴본 것처럼 웹브라우저에서는 localStorage와 sessionStorage를 사용해서 데이터를 저장하고 불러올 수 있습니다.

13.3.2 redux-persist와 Storage

그렇다면 redux-persist에서는 어떤 Storage를 사용해서 데이터를 관리할까요?
지금부터는 redux-persist의 Storage에 대해서 살펴보도록 하겠습니다.

먼저 redux-persist는 특정 Storage에 의존성이 없습니다.
그래서 개발자의 선택에 따라 localStorage를 사용할 수도 있고, sessionStorage를 사용할 수도 있습니다.

그리고 이러한 각각의 Storage를 redux-persist에서는 Storage Engine이라고 부릅니다.
redux-persist에 Storage를 제공해주는 역할을 하는 것이죠.
그리고 Storage Engine은 개발자가 원하는 것을 선택하고 redux-persist에 연동시켜 사용하게 됩니다.

위 화면은 redux-persist의 다양한 Storage Engine 목록을 나타낸 것입니다.

가장 대표적인 것으로 localStorage와 sessionStorage가 제일 상단에 나와 있는 것을 볼 수 있고, 그 아래로도 수많은 종류의 Storage Engine이 있습니다.

Redux 자체가 JavaScript 라이브러리이기 때문에, JavaScript가 돌아갈 수 있는 환경이라면 어디서든지 사용할 수 있습니다.
때문에, redux-persist도 Node.js나 Electron 등의 여러가지 환경에서 사용할 수 있도록 다양한 Storage Engine을 제공하는 것입니다.

우리는 여기서 모든 Storage Engine에 대해서 배우진 않고, 대표적인 localStorage와 sessionStorage에 대해서만 배우도록 하겠습니다.

// localStorage Engine
import storage from 'redux-persist/lib/storage';

// sessionStorage Engine
import storageSession from 'redux-persist/lib/storage/session';

위 코드는 redux-persist에서 localStorage Engine과 sessionStorage Engine을 사용하기 위해 import하는 코드입니다.

localStorage가 기본 Storage이기 때문에 이름이 그냥 storage라고 되어 있는 것을 볼 수 있고, sessionStorage는 별도로 session이라는 이름으로 분리되어 있는 것을 볼 수 있습니다.

실제로 이 Storage Engine을 사용하는 방법에 대해서는 뒤에서 배우도록 하겠습니다.

localStorage와 sessionStorage 이외에 추가로 다른 Storage Engine에 대해서 궁금한 분들은, 아래 링크에 접속하면 redux-persist의 다양한 Storage Engine을 살펴보실 수 있으니 참고하기 바랍니다.

https://github.com/rt2zz/redux-persist#storage-engines