👩‍🎨 Jotai 란?

Jotai, 왜 필요할까?

리액트로 웹사이트를 만들다 보면, 여러 컴포넌트끼리 같은 데이터를 공유해야 할 때가 있다. 예를 들어, 로그인한 사용자의 이름을 헤더에서도 보여주고, 마이페이지에서도 써야 할 경우이다.

이럴 때 상태관리라는 게 필요하다.

그런데…

Redux는 너무 복잡하고

Recoil은 뭔가 어렵고

Context API는 상태가 많아지면 복잡해지고…

그래서 등장한 게 Jotai이다!

Jotai란?

Jotai는 원자(atom) 단위로 상태를 관리하는 React 라이브러리이다. 이름 뜻 그대로, 상태를 가장 작은 조각으로 나눠서 필요할 때만 가져다 쓰는 방식이다.

🔧 설치 방법

npm install jotai 

🧩 atom ?

atom은 Jotai에서 상태(state)를 작은 조각으로 나눌때, 이를 저장하는 가장 작은 단위이다.

🔍 Jotai 사용법

import { useAtom } from 'jotai';

function Counter() {
  const [count, setCount] = useAtom(countAtom); // 연결 완료!

  return (
    <>
      <h1>{count}</h1> {/* countAtom에서 가져온 값 */}
      <button onClick={() => setCount(count + 1)}>+1</button> {/* countAtom을 수정 */}
    </>
  );
}

import { useAtom } from 'jotai';

👉 Jotai에서 상태를 사용할 때 꼭 필요한 코드이다.

👉 useAtom()은 useState()처럼 작동하지만, 상태를 atom과 연결해서 사용한다.

 const [count, setCount] = useAtom(countAtom);

👉 countAtom은 아까 만든 Jotai의 상태 조각(예: const countAtom = atom(0))이다.

👉 useAtom(countAtom)을 사용하면:

count: 현재 상태값을 읽을 수 있다. (초기값은 0)
setCount: 상태를 변경할 수 있는 함수이다.

⚠️ useState 와 useAtom의 차이점

const [count, setCount] = useState(0); 

const [count, setCount] = useAtom(countAtom);

useState는 해당 컴포넌트에서만 쓰지만,
useAtom은 전역처럼 여러 컴포넌트에서 공유할 수 있다.

🔁 파생 Atom (Derived Atom)

하나의 atom을 기준으로 새로운 atom을 만들고 싶을 때 사용한다.
계산된 값이나 가공된 값을 저장할 수 있다.
get()을 통해 다른 atom의 값을 불러온다.

const countAtom = atom(1); // 기본 숫자 상태
const doubleAtom = atom((get) => get(countAtom) * 2); // 

👉 doubleAtom은 countAtom의 값을 감시한다.

👉 만약 countAtom이 3이 되면, doubleAtom은 자동으로 6이 된다.

👉 doubleAtom은 읽기 전용이기 때문에, 상태를 직접 수정할 수는 없다.

만약 쓰기 전용을 만들고 싶다면?

🧰 쓰기 가능한 파생 Atom

doubleAtom은 읽기 전용이지만, 읽기와 쓰기를 모두 지원하고 싶을 때 다음과 같이 코드를 작성하면 된다.

const countAtom = atom(0);

const countControlAtom = atom(
  (get) => get(countAtom), // 읽기
  (get, set, newValue) => set(countAtom, newValue) // 쓰기
);

get: 현재 상태를 읽을 때 사용

set: 다른 atom의 값을 수정할 때 사용 -> 쓰기 전용 구현 가능!

newValue: 외부에서 이 atom에 전달한 새 값

👉 이로써, atom 값을 외부에서 직접 수정할 수 있다.

⏳ 비동기 Atom

atom(async () => {...}) 형태로 비동기 작업을 처리할 수 있다.
데이터를 불러오거나, 서버 요청을 보낼 때 유용하다. 즉, useEffect 없이도 비동기 상태를 아주 간단하게 다룰 수 있는 방법이다.

const userAtom = atom(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return await res.json();
});

const [user] = useAtom(userAtom);

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

userAtom은 API 응답을 자동으로 받아오기 때문에,
useAtom(userAtom)으로 호출만 해도 데이터 가져올 수 있다.

로딩, 에러 상태를 관리하고 싶으면 Suspense를 사용하여, 필요에 따라 별도로 관리할 수 있다.

최종정리

항목	설명
단순한 문법	useState처럼 사용 가능
전역 상태 공유	여러 컴포넌트에서 atom 공유
계산된 상태	파생 atom으로 값 자동 계산
비동기 작업 지원	API 요청도 atom으로 처리
최소 렌더링 단위	필요한 컴포넌트만 리렌더링됨

✍️ 배운점

프로젝트 미션을 통해 Jotai라는 새로운 상태관리 도구를 접하게 되었다. 처음엔 "useState(useState를 모른다면?: https://velog.io/@krsjkim/React-삼형제-Hook-useState-useEffect-useNavigate 참고) 랑 뭐가 다르지?"라는 의문이 들었지만, 실제로 사용해보면서 Jotai의 전역 상태 공유의 간편함, 비동기 처리를 위한 atom 구조, 그리고 불필요한 렌더링을 줄여주는 설계 방식을 구현할 수 있다는 점을 배웠고, 이 내용을 정리해보고 싶다는 생각이 들어 이번 위클리 블로그 주제로 작성해보았다.

📦 상태관리 도구들 간단 비교
Redux 👉 회사용, 복잡함
Recoil 👉 실험적, 어렵지만 유연함
Zustand 👉 편하지만 구조 잡기 필요
Jotai 👉 심플하고 가볍다!

Jotai를 공부하다 보니 자연스럽게 다른 상태관리 도구들도 궁금해졌다. 아직은 작은 규모의 프로젝트만 경험하느라 Jotai만 사용해보았지만, 앞으로 Redux, Recoil, Zustand 같은 도구들도 직접 사용해보며 상황에 맞는 상태관리 방법을 선택할 수 있는 개발자가 되고 싶다는 생각이 들었다.