React Recoil vs Zustand

🔥 최신 상태관리: Recoil vs Zustand

React의 상태 관리는 전통적으로 Redux가 주류였지만, 최근에는 더 간단하고 유연한 도구들이 많이 사용됩니다. 이 글에서는 Recoil과 Zustand를 비교하고, 각각의 기본 사용법을 소개합니다.

1. Recoil 소개

• Facebook에서 개발한 상태 관리 라이브러리
• React와의 통합성이 매우 높음
• atom과 selector 개념으로 구성됨

🛠 설치

npm install recoil

🚀 예제 코드

// App.js import { RecoilRoot } from 'recoil'; import Counter from './Counter'; function App() { return ( <RecoilRoot> <Counter /> </RecoilRoot> ); } // counterAtom.js import { atom } from 'recoil'; export const countState = atom({ key: 'countState', default: 0, }); // Counter.js import { useRecoilState } from 'recoil'; import { countState } from './counterAtom'; function Counter() { const [count, setCount] = useRecoilState(countState); return ( <div> <h2>Recoil Count: {count}</h2> <button onClick={() => setCount(count + 1)}>+1</button> </div> ); }

2. Zustand 소개

• 기본 React 상태와 매우 유사한 방식
• 코드가 짧고 간결하며, 직관적인 API 제공
• Redux와 비슷한 개념이지만 더 간단함

🛠 설치

npm install zustand

🚀 예제 코드

// store.js import create from 'zustand'; export const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })) })); // Counter.js import { useStore } from './store'; function Counter() { const { count, increase } = useStore(); return ( <div> <h2>Zustand Count: {count}</h2> <button onClick={increase}>+1</button> </div> ); }

3. 비교

항목	Recoil	Zustand
학습 곡선	약간 높음	매우 쉬움
설정 필요성	RecoilRoot 필요	없음
비동기 처리	selector 사용	자유롭게 Promise/async 사용
공식 지원	Facebook	Poimandres(개발자 그룹)

🔚 결론

• 초보자 → Zustand 추천
• 정교한 상태 관리와 React 친화적 구조 → Recoil 추천
• 복잡한 글로벌 상태 관리 → Redux Toolkit 병행 고려

💬 여러분은 어떤 상태 관리 도구를 선호하시나요? 댓글로 공유해 주세요!