React 전역 상태 관리 - Jotai

1. Jotai

전역 상태 관리 라이브러리로, Jotai는 일본어로 원자(atom)를 의미하며, 이 이름처럼 Jotai는 상태를 원자 단위로 분리하여 관리 하는 방식으로 설계되었다.

 

2. Jotai 기본 사용법

기본적으로 Jotai는 React 내의 State, useState와 유사한 모양이기 때문에, 쉽게 입문할 수 있다. 전역 관리 atom을 생성하고, 생성된 atom을 컴포넌트 내에 불러와 사용한다고 보면 된다.

 

import { atom, useSetAtom } from "jotai";
import { useCallback } from "react";
import WritePrice from "./WritePrice";

export const priceAtom = atom(10000);

const App = () => {
  // const [price, setPrice] = useAtom(priceAtom)
  const setPrice = useSetAtom(priceAtom);

  const handleClick = useCallback(() => {
    setPrice((prev) => (prev += 1000));
  }, [setPrice]);

  return (
    <div>
      <button onClick={handleClick}>+</button>
      <WritePrice />
    </div>
  );
};

export default App;

 

예시를 보면 atom, useAtom, useSetAtom, useAtomValue가 있다.

 

 

2-1. atom

const priceAtom = atom(10000);

 

atom을 생성하고 괄호 안에 초기값을 넣을 수 있다.

 

 

2-2. useAtom(read/write)

const [price, setPrice] = useAtom(priceAtom)

 

생성된 atom을 불러와서 useState와 동일하게 사용 가능하다.

 

 

2-3. useSetAtom(write)

const setPrice = useSetAtom(priceAtom);

 

생성된 atom의 값을 update만 할 때 사용한다.

 

 

2-4. useAtomValue(read)

const price = useAtomValue(priceAtom);

 

생성된 atom의 값을 read만 할 때 사용한다.

useSetAtom, useAtomValue는 각각 읽기, 쓰기만 가져와서 사용하기 때문에 useAtom과 다르게 재렌더링 하지 않은 장점이 있다.