왜 Recoil을 떠나 Zustan‍d를 선택했는가?

date

Jun 29, 2025

slug

from-recoil-to-zustand

author

status

Public

Recoil은 atom과 selector 기반의 단순하고 강력한 구조 덕분에 처음 배우고 사용하기는 매우 쉬웠습니다. 상태 간의 의존성과 파생 상태를 선언적으로 정의할 수 있었고, Suspense와도 잘 연동되었습니다.

그러나 프로젝트가 커지고 상태가 많아질수록 다음과 같은 문제들이 생기기 시작했습니다:

결정적으로 Recoil의 지원이 중단되면서 새로운 상태 관리 라이브러리를 찾아야했습니다.

이 과정에서 Jotai와 Zustand를 비교하게 되었습니다.

Jotai는 Recoil과 비슷한 구조를 가져서 쉽게 적응할 수 있었지만,

Zustand는 다음과 같은 장점들로 인해 “이건 내가 원하던 상태 관리다”라는 확신을 주었습니다.

Zustand의 상태는 React 훅 내부가 아니라 바깥에서 관리됩니다. 이 말은 곧, React 컴포넌트가 아닌 서비스 모듈이나 유틸 함수 등에서도 상태에 접근하거나 수정할 수 있다는 의미입니다.


import { useMyStore } from './store'

// React 컴포넌트 외부에서도 접근 가능
const currentUser = useMyStore.getState().user

상태가 많아져도 Slice 패턴으로 스토어를 기능 단위로 나눌 수 있습니다.


export const useStore = create((...a) => ({
  ...createUserSlice(...a),
  ...createCartSlice(...a),
}))

Zustand는 axios, WebSocket, setTimeout 등의 로직을 store에 자유롭게 정의할 수 있습니다.


fetchUser: async () => {
  const res = await axios.get("/user")
  set({ user: res.data })
}

Zustand는 selector 기반 구독 최적화 덕분에, 상태 변경 시 관련 컴포넌트만 리렌더링되도록 설정할 수 있습니다.


const userName = useStore((state) => state.user.name)

Recoil은 React 친화적이고 좋은 상태 관리 도구였지만, 복잡한 상태 구조와 전역 사용성에 한계를 느꼈고,
Zustand는 그 간결함, 유연함, store 설계의 자유로움 덕분에 차세대 상태 관리 도구로 손색이 없었습니다.