Jotai?

조타이

조타이는 React의 상태관리 라이브러리중 하나이다.

일본어로 '상태'라는 뜻이라고 한다.

(내가 알기로는 Zustand 같은 경우에는 독일어로 '상태' 라고 한다.)

 

이 Jotai를 사용하면 리액트 애플리케이션을 비교적 간결하고 쉽게 전역상태를 관리할 수 있습니다.

 

Jotao는 리코일에서 영감을 받아 아토믹 모델과 함께 bootom-up 방식으로 접근 합니다.

아톰과 함께 상태를 생성하고 아톰 의존성에 따라 렌더링 최적화를 한다.

이 방식으로 리액트 컨텍스트의 리렌더링 이슈를 해결하게 되고 메모이제이션의 의존도를 줄일 수 있다고 합니다.

 

특징

특징으로는 간결하고 직관적이며

• 전역 상태 관리
• 컴포넌트 기반 상태 관리
• Recoil과의 유사성
• React Context와의 호환성
• 비동기 상태 관리

등이 있다.

 

1. 전역 상태 관리

Jotai는 애플리케이션 전역에서 상태를 쉽게 관리할 수 있게 해줍니다.

atom을 전역적으로 접근 가능해서 컴포넌트 간에 상태를 공유하는 것이 매우 쉽습니다.

 

2. 컴포넌트 기반 상태 관리

Jotai는 상태를 각 컴포넌트에서 독립적으로 관리할 수 있게 해줍니다.

이는 각 컴포넌트가 필요한 상태만을 구독하고 업데이트 하도록 해서 성능을 최적화 할 수 있습니다.

 

3. Recoil과의 유사성

Jotai는 Facebook의 Recoil과 유사한 방식으로 동작하지만, 더 간단하고 가볍습니다.

Recoil을 사용해본적이 있다면 Jotai는 쉽게 배울 수 있을것이다.

 

4. React Context와의 호환성

Jotai는 React Context를 사용하지 않습니다.

대신 atom과 훅을 사용해 상태를 관리하게 됩니다.

이는 성능 이슈를 줄이고, 상태 관리가 더욱 명확하게 해줍니다.

 

5. 비동기 상태 관리

Jotai는 비동기 상태 관리도 쉽게 처리할 수 있습니다.

atomWithDefault나 atomWithQuery 같은 비동기 atom을 사용해 서버에서 데이터를 가져오거나, 비동기 작업을 관리할 수 있습니다.

 

사용법

사용법으로는 당연하지만

npm i jotai

npm 다운로드를 받아줍니다.

 

그리고 보통 lib > atoms폴더를 만들어 관리를 해주게 됩니다.

 

import { atom } from "jotai";

export const countAtom = atom(0);

기본적으로는 이런식으로 아톰을 만들어준 후

 

import { useAtom } from "jotai";
import { countAtom } from "@/lib/atoms/atoms";

function Test(){
const [count,setCount] = useAtom(countAtom)
...

useAtom을 사용해 위처럼 가져와 useState처럼 사용해주게 됩니다.

 

로컬스토리지, 세션스토리지, 쿠키

만약 위 세곳중 한곳에 저장을 하고싶다면

npm install jotai jotai/utils

jotai/utils를 다운받아 줍니다.

 

이후

import { atom } from "jotai";
import { atomWithStorage } from 'jotai/utils';


export const countAtom = atom(0);
export const testAtom = atomWithStorage('localKeyName', 'initialLocal');

atomWithStorage로 atom을 만들어 주면 된다.

atomWithStorage의 첫번째 인자는 스토리지에 저장될 이름이고,

두번째는 기본값을 넣어주면 된다.

 

이는 로컬스토리지의 사용법이고

세션스토리지를 사용하려면

export const sessionStorageAtom = atomWithStorage('sessionKeyName', 'initialSession', {
  storage: sessionStorage,
});

세번째 인자로 storage: sessionStorage,를 넣어줘야 한다

 

쿠키의 경우는 조금 다르다.

Jotai는 기본적으로 쿠키를 직접 지원하지는 않지만, 로컬스토리지와 세션스토리에 비슷하게 atomWithStorage를 사용할 수 있다.

 

쿠키를 관리하기 위해서는 js-cookie와 같은 라이브러리를 함께 사용해야 한다.

npm install js-cookie

 

이후

import { atom } from 'jotai';
import Cookies from 'js-cookie';

const getCookie = (key, initialValue) => {
  if (typeof window === 'undefined') {
    return initialValue;
  }
  const savedValue = Cookies.get(key);
  return savedValue ? JSON.parse(savedValue) : initialValue;
};

const setCookie = (key, value) => {
  Cookies.set(key, JSON.stringify(value));
};

export const cookieAtom = atom(
  getCookie('cookieKey', 'initialCookie'),
  (get, set, newValue) => {
    set(cookieAtom, newValue);
    setCookie('cookieKey', newValue);
  }
);

이런식으로 사용하게 된다.

 

 

• getCookie 함수:
  • 주어진 키와 초기 값을 받아서, 쿠키에서 해당 키의 값을 가져옴.
  • 서버 환경(typeof window === 'undefined')에서는 초기 값을 반환함.
  • 쿠키에 값이 있으면 JSON으로 파싱하여 반환, 없으면 초기 값을 반환.
• setCookie 함수:
  • 주어진 키와 값을 받아서, 쿠키에 저장함.
  • 값을 JSON 문자열로 변환하여 저장함.
• cookieAtom:
  • Jotai의 atom을 이용해 쿠키 값을 관리하는 상태를 정의.
  • 초기 상태는 getCookie 함수를 이용해 설정.
  • 상태가 업데이트되면 쿠키도 업데이트.

가능은 하지만 보통 Jotai같은 상태 관리 라이브러리를 이용해서 쿠키 값을 직접적으로 관리하지는 않는다.