React에서 상태 관리는 필수적입니다. 오늘은 대표적인 상태 관리 라이브러리인 Jotai와 Zustand를 비교하며 각각의 장단점을 살펴보겠습니다.
Jotai: Atomic 패턴을 활용한 상태 관리
Jotai는 atomic 패턴을 기반으로 상태를 독립적인 단위(atom)로 관리하는 라이브러리입니다.
기본 사용법
import { atom, useAtom } from 'jotai';
// 상태 정의
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
</div>
);
}
function Display() {
const [count] = useAtom(countAtom);
return <p>현재 카운트: {count}</p>;
}
// App 컴포넌트
function App() {
return (
<>
<Counter />
<Display />
</>
);
}
JavaScript
복사
Jotai의 특징
•
상태 분리: 각 atom은 독립적으로 관리되며, 필요한 컴포넌트에서만 구독 가능함.
•
의존성 관리: atom 간 의존 관계를 설정하여 파생 상태를 쉽게 생성할 수 있음.
•
React 친화적: Suspense와 결합하여 비동기 데이터를 쉽게 처리할 수 있음.
Zustand: 중앙 집중형 상태 관리
Zustand는 중앙 집중형 스토어를 기반으로 모든 상태를 한 곳에서 관리하는 라이브러리입니다.
기본 사용법
import { create } from 'zustand';
// 스토어 생성
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const increment = useStore((state) => state.increment);
const count = useStore((state) => state.count);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
function Display() {
const count = useStore((state) => state.count);
return <p>현재 카운트: {count}</p>;
}
// App 컴포넌트
function App() {
return (
<>
<Counter />
<Display />
</>
);
}
JavaScript
복사
Zustand의 특징
•
중앙 집중형 관리: 모든 상태가 하나의 스토어에 정의됨.
•
부분 구독 가능: 필요한 상태만 선택적으로 구독하여 불필요한 리렌더링 최소화.
•
React 외부에서도 사용 가능: React 바깥에서도 상태를 활용할 수 있어 확장성이 뛰어남.
Jotai vs Zustand: 어떤 경우에 사용할까?
Jotai | Zustand | |
상태 관리 방식 | 원자(atom) 단위 상태 관리 | 중앙 집중형 상태 관리 |
리렌더링 최적화 | 개별 atom을 구독하여 최소화 | 선택적 상태 구독 가능 |
의존성 관리 | atom 간 의존성 설정 가능 | 별도의 의존성 설정 필요 |
React 외부 사용 | 불가능 | 가능 |
Suspense 지원 | 기본적으로 지원 | 별도 설정 필요 |
결론
•
Jotai는 세밀한 상태 관리가 필요하거나 React에 최적화된 상태 관리를 원할 때 적합합니다.
•
Zustand는 전역 상태를 간편하게 관리하거나 React 바깥에서도 활용할 수 있는 상태 관리가 필요할 때 유용합니다.
결국, setter가 어디서 관리되는지가 핵심인것 같다.
작은 상태를 여러 개 다뤄야 한다면 Jotai, 단순한 전역 상태를 효율적으로 관리하려면 Zustand가 더 적합해 보임.