✏️ Zustand

독일어로 "상태" 라는 뜻을 가진 라이브러리다.

이하의 특징을 가지고 있음.

 

• 특정 라이브러리에 엮이지 않음.
• 상태를 정의하고 사용하는 방법이 단순함. (상태관리 절차가 간소화 되어있음)
• 불필요한 리랜더링을 일으키지 않음
• react에 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법 제공
• 코드양이 적어서 보일러플레이트가 적음
• state관리 로직이 하나의 함수 내에서 처리 가능함

 

 

설치 방법

#npm
npm install zustand

#yarn
yarn add zustand

 

 

 

store 생성

create 함수를 불러온다

스토어에서는 상태 변수와 해당 상태를 업데이트하는 액션으로 구성되어있다.

set함수는 상태를 병합한다.                                                       

import create from 'zustand';

// set 함수를 통해서만 상태를 변경할 수 있다
const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}));

 

 

 

스토어에서 꺼내올때

컴포넌트에서 useStore 훅을 사용할 때는 스토어에서 상태를 어떤 형태로 꺼내올지 결정하는 셀렉터 함수를 전달해 주어야 한다.

만약 셀렉터 함수를 전달하지 않는다면 스토어 전체가 리턴된다.

// 상태를 꺼낸다
function BearCounter() {
  const bears = useStore(state => state.bears);
  return <h1>{bears} around here ...</h1>;
}

// 상태를 변경하는 액션을 꺼낸다
function Controls() {
  const increasePopulation = useStore(state => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
}

 

 

 

Zustand 코어

Zustand는 발행/구독 모델을 기반으로 이루어져 있다.

스토어에서 상태 변경이 일어났을때, 실행할 리스너 함수를 모아두었다가(구독)

상태가 변경되면 등록된 리스너들에게 상태가 변경되었다고 알려준다(발행)

스토어를 생성하는 함수를 호출할 때 클로저를 활용한다.

클로저는 함수가 선언될 때 그 주변환경을 기억하는 것,

스토어의 상태는 스토어를 조회하거나 변경하는 함수 바깥 스코프에 항상 유지되도록 만들었다.

상태의 변경, 조회, 구독 등의 인터페이스를 통해서만 스토어를 다루고

실제 상태는 애플리케이션의 생명 주기 처음부터 끝까지 의도치 않게 변경되는 것을 막을 수 있다.

 

---

 

Zustand 를 사용하는 이유

 

[유연성과 간결성]

Zustand는 아키텍처나 패턴을 강제하지 않는 매우 유연한 라이브러리다. 

작은 프로젝트에서 빠른 프로토타입을 만들고, 다른 상태 관리 라이브러리의 패턴과 쉽게 통합할 수 있게 해준다.

간결한 API는 라이브러리의 학습 곡선을 낮춰주고, 개발자가 직관적으로 상태 관리 로직을 구현할 수 있게 한다.

 

[불필요한 렌더링 최소화]

Zustand는 상태 변화에 따라 불필요한 컴포넌트 렌더링을 최소화한다. 

그렇기 때문에 대규모 애플리케이션에서 성능을 크게 향상시켜준다.

useStore 훅을 사용해서, 상태 업데이트가 UI 렌더링을 일으키지 않도록 설정할 수 있다.

 

[프로바이더 없음]

Recoil 라이브러리는 앱을 프로바이더로 감싸야 하는데,

Zustand는 프로바이더로 감싸지 않아도 되어 앱의 렌더링 트리를 단순화시킬 수 있다.

 

[SSR과의 호환성]

 Zustand는 SSR을 간단하게 지원해서 다른 라이브러리와 비교시 설정이 덜 복잡하다.

 

[작은 번들 사이즈]

Recoil이나 Redux보다 더 작은 번들 사이즈를 가진다. 이는 웹 성능에 민감한 프로젝트에서 큰 이점이 될 수 있다.