Recoil-Persist

Recoil-Persist는 Recoil atom (전역상태)을 브라우저(또는 리액트 네이티브)의 영구저장소(LocalStorage, SessionStorage, AsyncStorage등)에 자동으로 저장 Persist 하고 페이지 리로드 시 저장된 값을 복원 rehydrate 해주는 가벼운 라이브러리이다.

 

- 선택적 Persistence : 특정 atom만 골라서 저장가능

- 만료 설정 가능 : 저장 데이터의 TTL ( time to live ) 지정

- 타입스크립트 지원 : 제네릭 타입 정의 가능

 

* 예시 * 

import React from 'react';
import { RecoilRoot, atom, useRecoilState } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist();

const counterAtom = atom<number>({
	key : 'counter',
    default : 0,
    effect_UNSTABLE : [persistAtom],
});

function Counter(){
	const [count, setCount] = useRecoilState(counterAtom);
    
    return(
    	<>
        	.....
        </>
    )
}


export default function App(){
	return
    (
    	<RecoilRoot>
        	<......>
        </RecoilRoot>
    )
}

 

** 

effects_UNSTABLE 배열에 persistAtom을 추가하면 해당 atom이 LocalStorage에 저장되고, 앱 재시작 시 복원된다. 

 

 

 

 

** 고급설정 **

const {persistAtom} = recoilPersist({
	key : 'my-app',
    storage : sessionStorage,
    expireTime : 1000 * 60 * 60 * 24, // 밀리초 단위
    hydrate : true
});

 

key : 저장소 key prefix : 기본값은 'recoil-persist'

storage : 저장소 객체 localStorage | sessionStorage | AsyncStorage : 기본값은 localStorage

expireTime : 만료시간 ( 밀리초 ) :기본값은 undefined(무기한)

hydrate : 초기 복원 여부 : 기본값은 true

 

 

** 데이터 삭제 및 초기화 **

// 특정 atom 초기화 - localstorage에서 제거
localStorage.removeItem('recoil-persist/counter');

// 전체삭제
localStorage.clear();