📍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` 를 사용한 경우, 폼에 데이터를 입력 후 새로고침하여도 기존의 상태가 유지되는 것을 확인할 수 있습니다.
📍 마무리
- `recoil-persist` 는 폼 데이터 관리나 사용자 정보 저장과 같은 상태가 지속적으로 유지되어야 하는 상황에 매우 유용하게 쓰일 것 같습니다.
- 새로고침, 페이지 이동, 또는 브라우저 종료 후에도 이전 데이터의 상태값을 유지할 수 있어서 데이터가 초기화되지 않고 작업을 그대로 이어나갈 수 있어서 매우 편리한 라이브러리인 것 같습니다.
'React' 카테고리의 다른 글
[React] useEffect 안에서 비동기 함수 사용하기 (0) | 2024.07.29 |
---|