Recoil-persist로 localstorage 구현하기

📋 Recoil-persist

recoil을 사용중이라면 recoil-persist 패키지지를 통해 로컬스토리지를 구현할 수 있다.

사용법

첫 번째로 recoil-persist 패키지를 설치해주어야 한다.

npm install recoil-persist;

패키지를 설치했다면 저장할 값이 있는 곳에서 아래와 같이 설정해주면 된다.

const {persistAtom} = recoilPersist({
    key : "SaveLocalStorage",
    storage : localStorage
});

위에서 정의한 persistAtom을 사용할 곳에 effects_UNSTABLE를 작성해야 recoil-persist가 적용된다.

export const toDoState = atom<ToDoListItfc[]>({
    key : "toDo",
    default : [],
    effects_UNSTABLE : [persistAtom]
});

localstorage에 정상적으로 저장되는 것을 확인할 수 있다.

sessionstorage도 가능하다 하니 기회가 되면 해보도록 하자

참고

react-persist 공식문서