이번 프로젝트에서 처음으로 Jotai 를 사용하게 되어 공부해보고 간단하게 정리해보았다.
Jotai 란?
Jotai는 React를 위한 최소주의적 상태 관리 라이브러리입니다. 이름은 일본어로 "상태"를 의미하며, 이 라이브러리의 목표는 간결하고 직관적인 API를 통해 React 애플리케이션 내에서 상태 관리를 단순화하는 것이라고 한다. Jotai는 React의 Context API와 Hooks API를 기반으로 작동하며, Redux나 MobX 같은 기존 상태 관리 라이브러리에 비해 더 간단하고 유연한 접근 방식을 제공한다.
주요 특징
원자적 상태 관리: Jotai는 "원자(atom)"라고 불리는 작은 단위의 상태를 사용한다. 각 원자는 고유한 조각의 상태를 나타내며, 이를 통해 애플리케이션의 상태를 구성한다.
컴포넌트 간 상태 공유: 원자를 사용하면 애플리케이션의 어느 곳에서나 동일한 상태를 쉽게 공유하고 재사용할 수 있다. 이는 특히 크고 복잡한 애플리케이션에서 상태 관리를 단순화한다.
높은 성능: Jotai는 필요한 컴포넌트만을 리렌더링하도록 설계되어 있어, 애플리케이션의 성능을 최적화할수있다.
간결한 API: Jotai는 사용하기 쉬운 API를 제공한다. atom 함수로 상태를 생성하고, useAtom 훅으로 컴포넌트에서 상태를 사용할 수 있다.
Jotai 설치하기
먼저, 프로젝트에 Jotai를 설치해보자.
npm을 사용할 경우
npm install jotai
또는 yarn을 사용하는 경우:
yarn add jotai
Jotai Provider 설정하기
Jotai를 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에서 Provider를 설정해야 한다. 이렇게 하면, 애플리케이션의 어느 곳에서나 Jotai의 상태를 사용할 수 있게 된다.
Jotai 상태 사용하기
이제 Jotai를 사용하여 상태를 생성하고, 이를 컴포넌트에서 사용할 수 있다. 예를 들어, 간단한 상태를 생성하고 사용하는 방법으로
// state.js
import { atom } from 'jotai';
export const countAtom = atom(0); // 초기값이 0인 상태 생성// 컴포넌트에서 사용하기
import { useAtom } from 'jotai';
import { countAtom } from './state';
function Counter() {
const [count, setCount] = useAtom(countAtom);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(c => c + 1)}>Increase</button>
</div>
);
}위 예시처럼, Jotai는 매우 간결하고 직관적인 API를 제공하며, 상태 관리를 더욱 쉽게 만들어 준다. Jotai를 사용하여 프로젝트의 상태 관리 구조를 간소화하고 코드의 가독성을 높일 수 있다.
