🧐상황

React 프로젝트 중 현재 로그인한 유저의 정보를 Recoil Atom을 사용해 전역으로 저장했다.
props를 통해 유저 정보를 넘겨주지 않아도 Atom에 접근하여 모든 페이지에서 유저 정보 가져올 수 있었음👏🏻
그러나... 페이지를 새로고침하게되면 Recoil Atom이 초기화되어 저장된 유저 정보가 휘발되는 문제가 발생했다💀 (이는 Recoil Atom이 브라우저의 메모리에만 존재하기 때문이라고 함)
이런 문제를 해결하고 저장한 상태를 지속하기 위해 Recoil-persist를 사용해봄✍🏻

---

🔎Recoil-persist

• Recoil 상태 관리 라이브러리를 위한 패키지
• Recoil 상태를 로컬 스토리지나 세션 스토리지에 저장
• 새로고침을 해도 Recoil 상태 유지됨

💡Recoil-persist 사용 방법

1. recoil-persist 설치, 사용할 파일에서 import

• 설치

npm install recoil-persist

• 사용할 파일에서 import

import { recoilPersist } from 'recoil-persist'

2. 옵션 설정

• key : 로컬 스토리지에 저장될 키 이름
• storage : 저장할 스토리지 선택 (localStorage or sessionStorage)

const { persistAtom } = recoilPersist({
  key: 'persist-atom-key',
  storage: localStorage,
})

3. 원하는 atom에 옵션 추가

• 원하는 atom에 effects_UNSTABLE: [설정한 옵션명] 추가
  해당 atom의 값이 변경될 때마다 설정한 스토리지에 저장되고, 새로고침해도 atom 값 유지됨

export const ExAtom = atom({
  key: 'ExAtom',
  default: 0,
  effects_UNSTABLE: [persistAtom],
});

💡Recoil Atom으로 유저 정보 저장한 경우 (Recoil-persist 사용 X)

코드

• UserAtom.js
  유저 정보 객체(id, password)를 저장하는 Recoil Atom

import { atom } from 'recoil';

export const UserAtom = atom({
  key: 'UserAtom',
  default: { id: '', password: '' },
});

• Page1.jsx
  input으로 유저 정보 입력받아서 그 값 UserAtom에 저장
  다른 페이지로 이동 버튼 누르면 Page2.jsx로 이동

import { useRecoilState } from 'recoil';
import { UserAtom } from './recoil/UserAtom';
import { useNavigate } from 'react-router-dom';

export default function Page1() {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useRecoilState(UserAtom);

  const handleIdInput = (event) => {
    setUserInfo({ ...userInfo, id: event.target.value });
  };

  const handlePassWordInput = (event) => {
    setUserInfo({ ...userInfo, password: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    navigate('/page2');
  };

  return (
    <>
      <h1>페이지1</h1>
      <label htmlFor='id'>아이디</label>
      <input type='text' id='id' value={userInfo.id} onChange={handleIdInput} />
   
      <label htmlFor='password'>비밀번호</label>
      <input
        type='password'
        id='password'
        value={userInfo.password}
        onChange={handlePassWordInput}
      />

      <button type='submit' onClick={handleSubmit}>
        다른 페이지로 이동
      </button>
    </>
  );
}

• Page2.jsx
  UserAtom에 접근해서 현재 저장된 유저 정보를 가져옴

import { useRecoilValue } from 'recoil';
import { UserAtom } from './recoil/UserAtom';

export default function Page2() {
  const userInfo = useRecoilValue(UserAtom);
  console.log(userInfo);
  
  return (
    <>
      <h1>페이지2</h1>
      
      <strong>recoil에 저장된 id: </strong>
      <span>{userInfo.id}</span>
      
      <strong>recoil에 저장된 password: </strong>
      <span>{userInfo.password}</span>
    </>
  );
}

실행

• 페이지1에서 Recoil Atom에 저장한 유저정보를 페이지2에서 가져와 잘 찍히지만,
  새로고침을 하면 저장된 유저정보가 초기화됨
  

💡Recoil-persist 사용한 경우

코드

• UserAtom.js
  Recoil-persist 라이브러리 활용해 유저 정보 객체 로컬스토리지에 저장

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

const { persistAtom } = recoilPersist({
  key: 'user',
  storage: localStorage,
});

export const UserAtom = atom({
  key: 'UserAtom',
  default: { id: '', password: '' },
  effects_UNSTABLE: [persistAtom],
});

• Page1.jsx , Page2.jsx 위와 동일

실행

• 페이지1에서 Recoi-persist 활용해 저장한 유저정보를 페이지2에서 가져와 잘 찍힘
  로컬스토리지에 유저정보 저장됨
  새로고침을 해도 유저정보 유지됨
  

---

• 실제 프로젝트를 진행할 때는 sessionStorage에 저장했음!✍🏻 (코드 보러가기)
• 이유
  localStorage에 유저 정보를 저장한 경우 브라우저를 껐다 켜도 로그인 상태가 유지되는데,
  새로고침 시에만 유지되고 브라우저 창을 끄면 정보가 사라지는 것을 원해서 sessionStorage에 저장하기로 결정