Jotai 상태관리 라이브러리

1. Jotai

Jotai 는 "React State Management Library" 중 하나이고 상태 관리에 필요한 편의 기능을 제공하는 라이브러리이다.

불필요한 리렌더링을 방지하고 작은 패키지 사이드를 가지고 있다. Jotai는 상태를 관리하는 API가 매우 간단하고 직관적이다. atom을 만들고, 컴포넌트에서 상태를 사용하기 위해 useAtom 하나만으로 읽기와 쓰기를 처리할 수 있어 코드가 단순해지고, 상태 흐름이 명확해진다.

jotai

# npm
npm i jotai

# yarn
yarn add jotai

# pnpm
pnpm install jotai

 

 

2. 기본 사용법

1. atom

const countAtom = atom<Number>(1);

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

 

2. useAtom

const [count, setCount] = useAtom(countAtom)

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

 

 

3. useSetAtom

const setCount = useSetAtom(countAtom);

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

 

 

4. useAtomValue

const count = useAtomValue(countAtom);

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

 

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

 

3.  읽기 전용 아톰,  쓰기 전용 아톰,  읽기 / 쓰기 겸용 아톰

1. 읽기 전용 아톰

const priceAtom = atom<Number>(100);
const readOnlyAtom = atom((get) => get(priceAtom) * 2); // 읽기 전용 아톰

 

 

2. 쓰기 전용 아톰

const countAtom = atom<Number>(0);
const incrementAtom = atom(
    null,
    (get, set) => set(countAtom, get(countAtom) + 1) // 쓰기 전용 아톰
);

 

3. 읽기/쓰기 겸용 아톰

const countAtom = atom<Number>(0);
const countWithMultiplierAtom = atom(
    (get) => get(countAtom) * 2,                 // 읽기
    (get, set, newValue: number) => set(countAtom, newValue / 2) // 쓰기
);

 

※ 아톰을 바로 호출하지 않고 전용 아톰을 사용하는 이유

readOnlyAtom은 의존하고 있는 priceAtom이 변경될 때 자동으로 업데이트된다.

readOnlyAtom을 컴포넌트에서 구독하고 있다면 priceAtom 값이 변경될 때 해당 컴포넌트는 자동으로 최신 값을 받아 리렌더링된다.

반면, priceAtom을 직접 읽어서 2를 곱하는 식으로 매번 계산한다면, priceAtom의 값이 바뀌더라도 해당 계산이 사용되는 컴포넌트에서 직접적인 리렌더링 처리가 필요하다.

 

4.  Provider

1. Provider의 사용 유무에 따라 애플리케이션의 상태 관리 방식과 리렌더링 범위에 큰 차이가 생긴다.

 

2. Jotai는 기본적으로 애플리케이션의 최상위에서 상태를 관리하기 위해 전역적으로 하나의 기본 Provider를 사용한다. 따라서 Provider를 별도로 설정하지 않으면, 모든 atom 상태는 애플리케이션 전체에서 전역적으로 공유된다.

 

3. 지역적인 상태가 필요한 경우에는 특정 컴포넌트 트리에서만 사용하는 상태는 Provider로 관리해 전역 상태와 겹치지 않도록 한다.

 

5.  클래스형 컴포넌트에서 접근

React Hook(useAtomValue)는 함수 컴포넌트나 커스텀 훅 내부에서만 사용할 수 있기 때문에, 클래스 내부에서는 바로 사용할 수 없다. 클래스에서 Jotai 값을 가져오려면 두 가지 방법이 있다.

1. 클래스에서 atom 값을 직접 사용하는 방법 (Jotai Store 사용): getDefaultStore()를 통해 Jotai store에 직접 접근하여 값을 가져온다.
2. 클래스가 아닌 함수 컴포넌트로 감싸서 사용하는 방법: 함수형 컴포넌트에서 useAtomValue를 사용하고, 해당 값을 클래스에 전달

getDefaultStore()를 사용해 atom 값 접근하기

import {getDefaultStore} from "jotai";

constructor(auth) {
	const count = getDefaultStore().get(countAtom);
}