[Recoil] Recoil-persist 란?!

📍Recoil-persist 소개

• 프로젝트 진행중, Form 에 대한 상태를 Recoil Atom으로 관리하고 있었습니다.
• 하지만 다른 페이지를 방문하거나, 새로고침하면 Atom에 저장된 값이 초기화되어 작성해둔 정보가 날라가는 문제가 발생하였습니다.
• 작성한 정보가 날아가는 문제를 해결하기 위해 다양한 방법을 알아보던 중, `recoil-persist` 라는 라이브러리를 알게 되었고 이를 적용하는 방법과 예시를 공유해 보겠습니다.

 

📍Recoil-persist 란?!

• Recoil 상태 관리 라이브러리의 확장이며, Recoil 상태를 지속적으로 관리하고 복원하기 위한 도구입니다.
• Recoil로 관리되는 상태를 로컬 스토리지 또는 세션 스토리지와 같은 클라이언트 측 저장소에 저장하고, 페이지 새로고침 또는 재방문 시에 이전 상태를 복원할 수 있습니다.
  • ex) 여러 단계로 나눠진 폼을 관리할 때, 새로고침해도 이전 단계의 폼 값들을 저장할 수 있음
• 장점
  • 상태 지속성
  • 간편한 설정 및 커스터마이징 용이
  • 자동 갱신 및 유연성

 

📍Recoil-persist 적용법

• `recoil-persist` 설치
  • `yarn add recoil-persist` 나 `npm install recoil-persist` 를 통해 라이브러리를 설치해줍니다.
• `recoilPersist` 설정
  • 설치가 완료되면 `recoilPersist` 를 import 후 상태를 지속적으로 유지하고 싶은 atom에 `effects_UNSTABLE: [persisAtom]` 을 선언해줍니다.

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist({
  key: 'recoil-persist', // 로컬 스토리지에서 상태를 구분할 때 사용
  storage: localStorage, // 기본값은 localStorage이며, 필요에 따라 sessionStorage로 변경 가능
})

• Atom에 `persistAtom` 적용
  • Recoil의 `atom`에 `persistAtom` 을 `effects_UNSTABLE` 옵션을 통해 적용합니다.
  • 아래 예시는 방 등록 폼 데이터 유지하기 위한 roomFormState atom에 `persistAtom` 을 적용한 예시입니다.

import { atom } from 'recoil'
import { persistAtom } from './path/to/persist'

export const roomFormState = atom<RoomFormType | null>({
  key: 'roomRegisterForm', // atom의 고유 key
  default: {
    images: [],
    title: '',
    address: '',
    desc: '',
    bedroomDesc: '',
    price: 0,
    category: '',
    lat: '',
    lng: '',
    userId: 0,
    freeCancel: false,
    selfCheckIn: false,
    officeSpace: false,
    hasMountainView: false,
    hasShampoo: false,
    hasFreeLaundry: false,
    hasAirConditioner: false,
    hasWifi: false,
    hasBarbeque: false,
    hasFreeParking: false,
  },
  effects_UNSTABLE: [persistAtom], // persistAtom을 통해 상태 지속화
})

 

 

📍Recoil-persist  사용 유무 비교

✅ Recoil-persist를 사용하지 않았을 경우

• 폼에 모든 데이터를 입력한 후, 새로고침을 진행하면 기존에 입력되어 있던 값들이 모두 초기화되는 것을 확인할 수 있습니다.

 

 

✅ Recoil-persist를 사용했을 경우

• 반면 `recoil-persist` 를 사용한 경우, 폼에 데이터를 입력 후 새로고침하여도 기존의 상태가 유지되는 것을 확인할 수 있습니다.

로컬 스토리지에 key-value 형태로 저장됨

 

📍 마무리

• `recoil-persist` 는 폼 데이터 관리나 사용자 정보 저장과 같은 상태가 지속적으로 유지되어야 하는 상황에 매우 유용하게 쓰일 것 같습니다.
• 새로고침, 페이지 이동, 또는 브라우저 종료 후에도 이전 데이터의 상태값을 유지할 수 있어서 데이터가 초기화되지 않고 작업을 그대로 이어나갈 수 있어서 매우 편리한 라이브러리인 것 같습니다.