[TIL] 원티드 프리온보딩_9일차_220511

👀 Recoil 상태 유지

기업과제를 하면서 localStorage에 데이터를 저장하는 과정에서 해당 데이터를 recoil로 관리하였다. 하지만 새로고침을 하면서 recoil로 관리된 데이터가 없어지기 때문에 localStorage에 빈 데이터가 들어가는 문제가 발생했다.

Recoil이나 Vuex와 같은 상태관리 라이브러리는 새로고침하거나 페이지를 닫을 때 저장소에 저장된 데이터가 리셋되는 특징을 가지고 있다.

새로고침을 하더라도 상태를 유지하기 위해 Recoil-persist를 사용해보았다.

1. Recoil-persist 설치하기
   npm install recoil-persist
2. 만들어 두었던 atom파일에 아래와 같은 코드를 추가하면 된다.

import { recoilPersist } from 'recoil-persist' // 추가하기

const { persistAtom } = recoilPersist() // 추가하기

export const MovieFavorites = atom<IListItem[]>({
  key: '#movieFavorites',
  default: [],
  effects_UNSTABLE: [persistAtom], // 새로고침해도 유지
})

자세한 내용은 npm-recoil-persist를 참고해주시면 됩니당.👏

마무리하며..

기업과제를 하다보니 React를 더 공부해야겠다 + Recoil이 생각보다(?) 쉽다였다
물론 아직은 크게 어렵지 않은 것을 하다보니 그러는 걸 수도 있다.. 더어려운건 타입 스크립트.. 얼른 과제를 끝내고 인강이나 레퍼런스를 하며 React + TypeScript를 공부하고 싶다 !! 언제나 늘 기본기가 튼튼해야 나중 됐을 때 고생을 안한다!! 오늘도 내일도 화이팅이다.🤩