Recoil에서 Jotai로 마이그레이션한 이유: Atomic 상태 관리의 미래

React의 상태 관리 춘추전국시대. 한때 Facebook(Meta)이 직접 만든다는 이유로 Recoil이 큰 주목을 받았습니다. 하지만 현재 Recoil은 2년 넘게 메이저 업데이트가 없고, 메모리 누수나 키 중복 이슈 같은 치명적인 문제들이 방치되고 있습니다. (사실상 유지보수 중단 상태라는 의심을 받고 있죠.)

이에 대한 대안으로 떠오른 것이 바로 Jotai(일본어로 '상태'라는 뜻)입니다. Recoil과 같은 Atomic 패턴을 지향하지만, 훨씬 더 가볍고 강력합니다.

1. 왜 Jotai인가?

1.1 가벼움 (Lightweight)

Jotai의 번들 사이즈는 2~3KB 수준입니다. Recoil의 1/10도 안 됩니다.

1.2 Key 불필요

Recoil을 쓸 때 가장 귀찮았던 것 중 하나가 key 문자열을 일일이 지정해줘야 한다는 점이었습니다. 중복되면 에러가 뿜어져 나오죠.

// Recoil
const textState = atom({
  key: 'textState', // 이거 관리하기 귀찮음
  default: '',
});

Jotai는 객체 참조(Reference) 자체를 키로 사용하므로 문자열 키가 필요 없습니다.

// Jotai
const textAtom = atom('');

1.3 TypeScript 친화적

TS로 작성되었으며 타입 추론이 아주 훌륭합니다. 별도의 타입 정의 없이도 대부분 잘 동작합니다.

2. 마이그레이션 과정

API가 Recoil과 매우 유사하여(useRecoilState -> useAtom), "Find & Replace" 수준으로 쉽게 마이그레이션이 가능했습니다.

import { useAtom } from 'jotai';
import { textAtom } from './store';

function TextInput() {
  const [text, setText] = useAtom(textAtom);
  return <input value={text} onChange={e => setText(e.target.value)} />;
}

3. Jotai 만의 매력: Utils

atomWithStorage 같은 유틸리티가 기본 제공되어, 로컬 스토리지 연동이 너무나 쉽습니다. 또한 React의 Suspense와 완벽하게 통합되어 있어 비동기 상태 처리도 우아합니다.

결론적으로, 현재 신규 프로젝트에서 Atomic 패턴의 상태 관리가 필요하다면 Recoil보다는 Jotai(혹은 Zustand)가 훨씬 안전하고 현명한 선택입니다.