Jotai, primitive and flexible state management for React

Jotai tutorial

React Jotai 사용법 총 정리(1) - Jotai는 무엇이고 어떻게 사용하나요?

• 배경, 문제, 존재 이유

  • Minimal core API (2kb)
  • Many utilities and integrations
  • TypeScript oriented
  • Works with Next.js, Gatsby, Remix, and React Native
  • React Fast Refresh with SWC and Babel plugins

• 핵심 개념: atom, useAtom / Store, Provider

• 핵심 원리

  • 설치: npm i jotai

  • Create Atom

    import { atom } from 'jotai'
    
    const isDark = atom(false);
    

  • Use atoms

    import { useAtom } from 'jotai'
    
    const AnimeApp = () => {
      // const [anime, setAnime] = useAtom(animeAtom)
      const isDark = useAtomValue(darkAtom);  // write: 생성된 atom 값을 update만
      const setIsDark = useSetAtom(darkAtom); // read: 생성된 atom 값을 read만
    

• 동기 비동기 미들웨어

  • **loadable:** loading, hasData and hasError

• 캐싱 라이브러리 jotai-cache

• 리액트 18? Next.js?

  • Fully compatible with React 18 and the upcoming use hook. Now with a store interface that can be used outside of React.
  • Works with Next.js, Gatsby, Remix, and React Native

• 개발자도구는? = 관리의 용이성 = 디버깅