[React] Recoil 과 Recoil-Persist

Recoil 도입 역사의 시작

로그인 및 데이터 관련 전역 상태관리 기술로 Recoil을 채택하고 있다.

Recoil

리코일(Recoil) 은 API, 의미, 동작을 최대한 리액트스럽게 유지하며 이를 개선하고자 페이스북에서 만든 상태관리 라이브러리

Recoil 핵심개념

1. Atom : 하나의 작은 상태. 일반적인 리액트의 상태로 컴포넌트들 구독이 가능
2. useRecoilState : atom 값을 읽고 update 하는 hook. React Hook의 UseState 와 같은 방식으로 사용.
   클래스형 컴포넌트의 상태관리에서 State와 SetState를 합친 것과 같음.
3. useRecoilValue : setter을 제외한 atom의 값만 제공. 클래스형 컴포넌트의 상태관리에서 state의 역할
4. useSetRecoilState : setter만 제공. 클래스형 컴포넌트의 상태관리에서 setState의 역할
5. Selector : 다른 atom들 혹은 selector들을 받아 사용하는 순수 함수. atom의 상태에 의존한 동적인 데이터를 파생. 받은 atom들 혹은 selector들 중 어떤 것이 업데이트되면, selector 함수는 다시 평가되고 컴포넌트가 리렌더됨.

문제 상황

Recoil 로 지정한 어떤 atom 에 값을 집어 넣어 뒀다가 쓰는데..
상태관리 라이브러리의 특성 상 새로고침 하거나 페이지를 닫을 때 저장소에 저장된 상태가 삭제된다..

하지만 나는 새로고침 하거나 페이지를 닫았다가 열더라도 변수 값이 그대로 있어야 하는 기능을 구현해야 한다.

Recoil-persist ?

설치

> npm install recoil-persist

사용법

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

const { persistAtom } = recoilPersist()

const isLogin = atom({
  key: "isLogin",
  default: undefined,
  effects_UNSTABLE: [persistAtom]
});

export { isLogin };

recoil-persist 설치하고 → 선언해주고 → effects_UNSTABLE 로 설정해주면 된다.

이렇게 해주면 새로고침해도 값이 유지된다.

Recoil-Persist 공식 문서