React Jotai 사용법 총 정리(4) - atomWithStorage 에 대한 이야기 & Jotai 짧은 후기

React Jotai 사용법 총 정리(1) - Jotai는 무엇이고 어떻게 사용하나요? ( https://liebe97.tistory.com/49 )
React Jotai 사용법 총 정리(2) - atom 이해 및 기본 유용한 기능 ( https://liebe97.tistory.com/51 )
React Jotai 사용법 총 정리(3) - useAtom & provider 사용법 ( https://liebe97.tistory.com/52 )
React Jotai 사용법 총 정리(4) - Jotai 짧은 후기

 

atomWithStorage 에 대한 이야기

실제 프로젝트에서 atomWithStorage 로 세션스토리지를 사용할 때 문제가 있었다.

 

const storage = { ...createJSONStorage<any>(() => sessionStorage), delayInit: true };
const testAtom = atomWithStorage("test", undefined, storage);

위 코드는 세션스토리지 데이터를 아톰으로 읽기, 쓰기 할 수 있도록 세팅하는 코드이다.

 

"아톰 생성 → 세션스토리지를 읽어와서 데이터 세팅 → 아톰에 세션 설정 → 읽기, 쓰기 이용" 으로 사용되어야 하는데

"아톰 생성 → 세션 스토리지 데이터로 설정" 이 사이에서 생성될 때 설정된 초기값이 처음 랜더 때 읽힌다는 것이다.

 

초기값으로 데이터가 한 번씩 돌아가는 문제로 조타이 개발자에게 코멘트를 남겼지만

돌아오는 답변은 해결할 수 없다는 것이었다.

 

필자는 이에 해답으로 초기 랜더시에는 session 을 직접 가져와서 데이터를 사용했다.

(쿠키도 비슷한 문제가 생길 것이라고 예상...)

 

atomWithStorage 를 사용할 때는 꼭 데이터 세팅이 제대로 되는지 확인하고 사용하세요!

 

 

Jotai 포스팅 짧은 후기

splitAtom 이랑 atomWithStorage 에 세션이나 쿠키 저장 같은 Jotai 에 있는 기능들이 더 남아있는데... 

 

조타이는 버전업 작업으로 인해 사라지거나 수정된 기능들이 많아서,

더 이상의 1 버전의 조타이를 포스팅하기엔 무리가 있을 것 같다.

 

아직 버전 2가 나온지 얼마 되지 않아 지금은 1버전을 쓰는 것이 안정적일 것 같다.

이후 마이그레이션을 하게 된다면 아래 사이트에서 마이그레이션 가이드를 참고하면 된다.

https://jotai.org/docs/guides/migrating-to-v2-api

v2 API migration — Jotai