상태 관리 라이브러리 Zustand

최근 실무에서 리액트 상태 관리 라이브러리로 Zustand를 도입하기로 했습니다. Zustand는 독일어로 '상태'라는 뜻인데요. 2022년 12월 기준으로 npm trends에서도 Mobx를 제칠만큼 요즘 떠오르고 있는 라이브러리입니다. Zustand는 어떤 특징을 가지고 있을까요? 1. Flux 패턴을 사용합니다. 대신 Redux처럼 많은 보일러 플레이트가 필요하지 않습니다. Redux는 Redux Toolkit이 많이 보완해 준다고 해도 여전히 보일러 플레이트가 존재합니다. Zustand는 상태와, 상태를 변경하는 액션을 정의하고, 리턴 받은 hook을 어느 컴포넌트에서나 import 하여 원하는 대로 사용할 수 있습니다. 즉 아주 쉽고 단순합니다. 2. 리액트에 종속적이지 않습니다. 다른 React 상태 관리 라이브러리는 스토어를 주입할 때 Context API를 사용하지만 Zustand는 클로저를 활용하여 스토어 내부 상태를 관리함으로써 특정 라이브러리에 종속적이지 않습니다. 그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공합니다. 3. 디버깅 툴 지원 - 디버깅툴의 지원이 중단된 Mobx와는 달리, 동일한 Flux패턴을 사용하는 Redux의 디버깅 툴을 사용할 수 있습니다. 4. 적은 용량 - mobx가 16kb인데 반해, Zustand는 1.1kb밖에 되지 않습니다. 핵심 로직의 코드 줄 수가 42줄밖에 되지 않는다고 합니다.(Vanilla JS) 5. 쉬운 테스트 코드 작성 - Class 생명주기, Provider Wrapping 등으로 테스트 코드 구성이 복잡한 Mobx 와는 달리 hook 기반의 API 지원으로 비교적 간단히 테스트 코드 구성이 가능합니다. Jotai나 Recoil 같은 Atomic 한 스타일의 bottom-up 스타일이 아닌, top-down 식의 스토어 방식으로 최소한의 코드로 쉽고 빠르게 상태를 관리하고 싶으시다면 Zustand의 사용을 고려해 보시는것도 괜찮을것 같습니다.

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

GitHub

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

다음 내용이 궁금하다면?

지금 간편 가입하고 다음 내용을 확인해 보세요!

또는

이미 회원이신가요?

2023년 2월 1일 오전 12:11

 • 

저장 69조회 9,858

댓글 0