Jotai 전역 변수 관리 라이브러리

https://jotai.org/

Jotai, primitive and flexible state management for React

# npm
npm i jotai

# yarn
yarn add jotai

# pnpm
pnpm install jotai

Jotai는 상태 관리를 위한 라이브러리로, React 애플리케이션에서 상태를 관리하는 데 도움을 줍니다. Jotai를 사용하여 React 코드 내에서 상태를 어떻게 관리하는지 쉽게 설명해 드리겠습니다. Jotai는 Recoil과 비슷한 목적으로 사용할 수 있지만, 더 간단하고 직관적인 API를 제공합니다

import React from 'react';
import { atom, useAtom } from 'jotai';

// 1. 상태 원자(atom)를 생성합니다.
const countAtom = atom(0);

function Counter() {
  // 2. useAtom 훅을 사용하여 상태를 읽어오고 업데이트합니다.
  const [count, setCount] = useAtom(countAtom);

  // 3. 상태를 업데이트하는 함수를 정의합니다.
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

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

function App() {
  return (
    <div>
      <h1>Jotai Counter</h1>
      <Counter />
    </div>
  );
}

export default App;

위의 코드에서 주요 단계는 다음과 같습니다: atom 함수를 사용하여 상태 원자를 생성합니다. countAtom은 초기값이 0인 상태를 나타냅니다. useAtom 훅을 사용하여 상태를 읽어오고 업데이트합니다. count는 현재 상태 값이며, setCount는 상태를 업데이트하는 함수입니다. 상태를 업데이트하는 함수를 정의합니다. increment와 decrement 함수는 상태 값을 증가 및 감소시키기 위해 setCount 함수를 호출합니다. 이제 위의 코드를 실행하면 간단한 Jotai 기반의 카운터 앱이 생성됩니다. Jotai는 이런 식으로 상태를 관리하는 데 매우 편리하며, 컴포넌트 간 데이터 공유와 업데이트를 쉽게 처리할 수 있습니다