atomWithStorage

atomWithStorage를 사용하게 된 배경

aotmWithStroage를 사용하게 된 배경은 이와 같다
➡️ state가 새로고침 시 사라지면 안됐고, 그대로 값을 계속 유지할 수 있어야 했다. 처음에는 localStorage만 사용했지만, 전역 상태관리 + localStorage를 함께 사용하는 게 맞다고 생각했고, 그렇게 atomWithStorage를 사용하게 되었다.

https://jotai.org/docs/utilities/storage

🌟 jotai 공식 문서에 나온 기본 사용법

import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

const darkModeAtom = atomWithStorage('darkMode', false)

const Page = () => {
  const [darkMode, setDarkMode] = useAtom(darkModeAtom)

  return (
    <>
      <h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
      <button onClick={() => setDarkMode(!darkMode)}>toggle theme</button>
    </>
  )
}

공식문서에 따르면, atomWithStorage 함수는 React의 경우 localStorage 또는 sessionStorage, React Native의 경우 AsyncStorage에 값이 유지되는 원자를 생성한다고 한다.

atomWithStorag 사용시 파라미터 :
key : localStorage, sessionStorage, AsyncStorage와 상태를 동기화 할 때 키로 사용되는 문자열
initialValue : atom의 초기값
storage : 다음 메소드를 사용하는 객체
getItem(key, initialValue) : storage에서 항목을 읽거나 초기값으로 대체
setItem(key, value) : item을 storage에 저장
removeItem(key) : storage에서 item을 삭제한다.
subscribe(key, callback, initialValue) : 외부 storage 업데이트를 구독하는 방법

🌟 실제 사용해보기

// atom 파일 따로 분리 
import { atomWithStorage } from 'jotai/utils';

export const registerStateAtom = atomWithStorage('registerState', '');

// 사용 
const [registerState, setRegisterState] = useAtom(registerStateAtom);

useEffect(() => {
   pathname.includes('/travel/plan')
     ? setRegisterState('plan')
     : setRegisterState('record');
}, [pathname, setRegisterState]);

registerState가 url에 들어가서 관리가 되고, storage에 저장이 되어서 새로고침 시에도 state가 사라지지 않고 잘 유지된다.