Jotai

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

// 1. 기본 atom 정의 (컴포넌트 외부에서)
const countAtom = atom(0);
const nameAtom = atom('');

// 2. 파생 atom (다른 atom 기반 계산)
const doubleCountAtom = atom((get) => get(countAtom) * 2);

// 3. 읽기/쓰기 atom (커스텀 로직)
const countWithLimitAtom = atom(
  (get) => get(countAtom),
  (get, set, newValue: number) => {
    // 0-100 사이로 제한
    const clampedValue = Math.max(0, Math.min(100, newValue));
    set(countAtom, clampedValue);
  }
);

// 4. 비동기 atom (데이터 페칭)
const userAtom = atom(async (get) => {
  const response = await fetch('/api/user');
  return response.json();
});

// 5. localStorage 연동 atom
const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light');

// 6. 컴포넌트에서 사용
function Counter() {
  // 읽기 + 쓰기
  const [count, setCount] = useAtom(countAtom);

  // 읽기만 (리렌더링 최적화)
  const doubleCount = useAtomValue(doubleCountAtom);

  // 쓰기만 (리렌더링 최적화)
  const setName = useSetAtom(nameAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {doubleCount}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
      <button onClick={() => setName('Alice')}>
        Set Name
      </button>
    </div>
  );
}

// 7. Suspense와 함께 비동기 atom 사용
function UserProfile() {
  const user = useAtomValue(userAtom); // 자동으로 Suspense 트리거

  return <div>Welcome, {user.name}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}

// 8. 실무 패턴: 기능별 atom 모듈화
// atoms/cart.ts
export const cartItemsAtom = atom<CartItem[]>([]);

export const cartTotalAtom = atom((get) => {
  const items = get(cartItemsAtom);
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
});

export const addToCartAtom = atom(
  null,
  (get, set, item: CartItem) => {
    const items = get(cartItemsAtom);
    const existing = items.find(i => i.id === item.id);

    if (existing) {
      set(cartItemsAtom, items.map(i =>
        i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
      ));
    } else {
      set(cartItemsAtom, [...items, { ...item, quantity: 1 }]);
    }
  }
);