zustand 라이브러리란?(redux 상태관리 대신 쓰는 라이브러리)

Zustand는 React 애플리케이션을 위한 상태 관리 라이브러리입니다.

이 라이브러리는 간단하고, 유연하며, 효율적인 상태 관리를 제공하도록 설계되었습니다.

 

Zustand는 Redux나 MobX와 같은 다른 상태 관리 라이브러리보다 학습 곡선이 덜 가파르며, 설정이 간단합니다.

이는 React 컴포넌트 내부와 외부에서 사용할 수 있는 상태 저장소를 쉽게 생성할 수 있게 해줍니다.

 

---

요즘 개발자 커뮤니티에서는 Zustand와 같은 더 간단하고 유연한 상태 관리 라이브러리를 Redux보다 추천하는 경향이 있습니다. 이유는 아래와 같습니다.

 

1. 간결함과 직관성: Zustand는 매우 간단한 API를 제공합니다. 이로 인해 학습 곡선이 낮아지고, 개발자가 빠르게 상태 관리를 구현하고 이해할 수 있습니다. 반면, Redux는 더 많은 보일러플레이트 코드와 설정이 필요합니다.
2. 훅 기반의 접근: Zustand는 React의 훅(Hooks) 시스템과 자연스럽게 통합됩니다. 이는 컴포넌트 내에서 상태를 쉽게 구독하고 업데이트할 수 있게 해주어, React 애플리케이션과의 일관성을 높여줍니다. Redux도 React-Redux 라이브러리를 통해 훅을 지원하지만, Zustand는 처음부터 훅을 염두에 두고 설계되었습니다.
3. 구성의 유연성: Zustand는 상태 로직을 캡슐화하고 여러 저장소를 손쉽게 관리할 수 있도록 해주어, 대규모 애플리케이션에서도 유연성을 제공합니다. Redux는 단일 저장소 접근 방식을 사용하며, 이는 때때로 제한적일 수 있습니다.
4. 성능: Zustand는 필요한 컴포넌트에만 상태 변화를 알리므로, 애플리케이션의 성능을 최적화하는 데 도움이 됩니다. Redux에서도 성능 최적화를 위해 여러 기법을 사용할 수 있지만, Zustand는 사용이 더 간단합니다.
5. 타입스크립트와의 통합: Zustand는 타입스크립트와 잘 통합되어 타입 안전성과 개발 시 자동완성 기능을 제공합니다. Redux도 타입스크립트를 지원하지만, Zustand는 설정이 더 간단할 수 있습니다.

---

create 메서드

Zustand에서 create 메서드는 새로운 상태 저장소를 생성하는 데 사용됩니다. 이 메서드는 상태 저장소의 초기 상태와 함께 업데이트 로직을 정의하는 함수를 인자로 받습니다. 반환값으로는 해당 상태를 사용하기 위한 후크(hook)를 제공합니다.

import create from 'zustand'

const useStore = create(set => ({

  bears: 0,

  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),

  removeAllBears: () => set({ bears: 0 })

}));

 

위 예시에서 create 메서드는 상태 저장소를 생성하며, bears라는 상태와 이 상태를 업데이트하는 두 개의 메서드(increasePopulation, removeAllBears)를 정의합니다.

---

set 메서드

set 메서드는 Zustand 상태 저장소의 상태를 업데이트하는 데 사용됩니다. 이 메서드는 상태를 직접 변경하는 함수 또는 새 상태 객체를 인자로 받아, 상태 저장소의 현재 상태를 업데이트합니다. set은 상태 업데이트 함수 내에서 호출되며, 이 함수는 create 메서드에 의해 정의된 상태 업데이트 로직에서 사용됩니다.

// 상태를 업데이트하는 함수 사용 예시

set(state => ({ bears: state.bears + 1 }));

// 새 상태 객체를 직접 전달하는 예시

set({ bears: 10 });

 

set 메서드를 사용하면 컴포넌트 외부에서도 상태를 업데이트할 수 있으며, 이는 Zustand가 제공하는 가장 강력한 기능 중 하나입니다.