recoil을 이용한 storage에 저장

이전 항해캡슐에는 편지를 작성하면 1초에 한번씩 로컬스토리지에 내용을 저장해서 새로고침을하거나 다른페이지를 갔다가 오더라도 다시 보여지게끔 했었다.

 

현재 다시 만들면서 편지를 리엑트스럽게 전역상태관리로 따로 관리를 하는게 좋겠다 생각이 들었고, 빠르게 구현해야하는점을 고려해서 실전프로젝트때 사용했었던 recoil을 사용하게 됬다.

 

다만 recoil을 그냥 사용하게되면 새로고침 했을때 값이 초기화되는점이 문제였는데 그걸 방지하고자 recoil-persist를 이용해서 storage에 저장이 필요하게됬다.

 

여기에서 또 고민했던게 localStorage, sessionStorage중 어떤걸 이용하면 좋을까 고민을 했고, 편지는 개인적은 글이라고 생각해서 직접 지우지 않는이상 계속 유지되는 localStorage보다는 탭을 닫으면 사라지는 sessionStorage를 이용하는게 더 좋을 것 같다는 생각이 들었다. 

 

localStorage , sessionStorage 차이점

	localStorage	sessionStorage
데이터 지속성	저장된 데이터는 사용자가 명시적으로 삭제하지 않는 한 영구적으로 유지, 브라우저를 닫고 다시 열어도 데이터 유지	해당 세션이 유지되는 동안만 유지, 브라우저를 닫거나 탭을 닫으면 저장된 데이터는 삭제
스코프	도메인 레벨의 스코프를 가진다. 여러페이지 간에 데이터를 공유	세션단위로 유효하며 세션 강에 데이터를 공유할수 없다
사용목적	로그인상태, 사용자 설정등의 영구 데이터를 저장하는데 적합	임시 데이터 또는 상태정보를 저장하는데 적합, 장바구니, 세션 로그인 등
용량제한	브라우저마다 상이 / 세션 스토리지보다 크며 대체로 5MB ~ 10MB정도 이다.	브라우저마다 상이

 

sessionStorage에 저장하는 법

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist({
  key: "sessionStorage", // 고유한 key 값
  storage: sessionStorage,
})

const letterAtom = atom({
  key: 'letter',
  default: {
    content: ''
  },
  effects_UNSTABLE: [persistAtom]
})

export default letterAtom

localStorage에 저장하는 법

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist({
  key: "localStorage", // 고유한 key 값
  storage: localStorage,
})

const letterAtom = atom({
  key: 'letter',
  default: {
    content: ''
  },
  effects_UNSTABLE: [persistAtom]
})

export default letterAtom