Jotai: React 상태 관리의 간단한 접근법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

React 개발자, 특히 복잡한 상태 관리가 필요하지만 간결한 API를 선호하는 중간~고급 개발자

핵심 요약

• atom: 상태의 기본 단위로, atom(초기값) 형식으로 생성되며, useAtom을 통해 컴포넌트에서 접근 가능
• derived atom: 다른 atom의 값을 기반으로 계산된 상태를 생성, atom((get) => get(기본_atom) * 2) 형식으로 정의
• 성능 최적화: 특정 atom만 변경 시 해당 컴포넌트만 리렌더링되어 성능 향상
• 유연성: useState 대체부터 복잡한 애플리케이션 상태 관리까지 적용 가능

섹션별 세부 요약

1. 소개

• Jotai는 React 상태 관리에서 "하위 업" 접근 방식을 채택, 작은 단위의 atom으로 상태를 구성
• "상단 업" 방식의 중앙 집중식 스토어와 대비, 복잡성 감소
• TypeScript 지원, 최소한의 API 제공

2. 설치 및 기본 사용법

• 설치 명령: npm install jotai 또는 yarn add jotai
• 주요 API:
• atom(초기값): 상태 정의
• useAtom(atom): 컴포넌트에서 상태 접근 및 업데이트

3. `atom`과 `useAtom`

• atom 예시:

```ts

export const countAtom = atom(0);

export const userAtom = atom({ name: 'John Doe', age: 30 });

```

• useAtom 예시:

```ts

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

```

• 리렌더링 최적화: atom의 값 변경 시 해당 atom을 사용하는 컴포넌트만 리렌더링

4. `derived atom`

• 계산된 상태 생성:

```ts

export const doubleCountAtom = atom((get) => get(countAtom) * 2);

```

• 읽기 전용 derived atom은 값만 접근 가능, 쓰기 가능 derived atom은 로직 업데이트 가능:

```ts

export const controlAtom = atom(

(get) => get(countAtom),

(get, set, action) => {

if (action === 'INCREMENT') set(countAtom, get(countAtom) + 1);

}

);

```

5. 주요 장점

• 간결성: actions, reducers, dispatchers 없이 상태 관리 가능
• 성능: 자동 리렌더링 최적화 제공
• 유연성: 간단한 useState 대체부터 복잡한 애플리케이션 상태까지 적용 가능

결론

Jotai는 복잡한 상태 관리가 필요하지만 간결한 API를 선호하는 React 개발자에게 이상적인 선택. atom과 derived atom을 활용해 상태를 효율적으로 관리할 수 있으며, TypeScript 지원과 성능 최적화 기능으로 실제 프로젝트에서 빠르게 도입 가능.