[React] Jotai

1. Jotai 개요

1.1 Jotai 개념

Jotai는 일본어로 “상태”를 의미하며, React 애플리케이션에서 상태를 원자 단위로 관리할 수 있도록 도와주는 상태 관리 라이브러리이다.

1.2 Jotai 특징

• 원자 기반 상태 관리
  • 애플리케이션의 상태를 가능한 가장 작은 단위(원자, Atom)로 나누고, 이러한 원자들을 조합하여 복잡한 상태 관리를 단순화할 수 있도록 설계하여 상태 로직을 쉽게 재사용할 수 있게 한다.
• React Hook 기반
  • React의 훅을 사용하여 상태를 관리한다.
• Recoil에서 영감을 받아 만들어짐
  • Recoil에 영감을 받았지만, 더 단순하고 가벼운 API를 제공한다.

2. 사용하기

2.1 Provider 공급하기

기본적으로 Jotai는 전역 상태를 사용하지만, Provider를 통해 상태를 특정 범위에서만 사용할 수 있다.

import Router from "./shared/Router";
import { Provider } from "jotai";

function App() {
  return (
    <Provider>
      <Router />
    </Provider>
  );
}

export default App;

2.2 atom(원자) 생성하기

atom은 Jotai에서 상태를 정의하는 기본 단위이다.

// src/atoms/counterAtom.jsx
import { atom } from "jotai";

export const counterAtom = atom(0); // 초기 값: 0

2.3 atom(원자) 사용하기

Jotai의 useAtom 훅을 사용하여 atom의 상태를 가져올 수 있다.

// src/store/ConterStore.jsx
import { useAtom } from "jotai";
import { counterAtom } from "../atoms/counterAtom";

const Counter = () => {
  const [count, setCount] = useAtom(counterAtom);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;