Zustand

이 문서는 토막글입니다.

토막글 규정을 유의하시기 바랍니다.

상태관리 라이브러리
{{{#!wiki style="margin: 0 -10px;" {{{#!folding [ 주요 라이브러리 ] {{{#!wiki style="margin-bottom: -15px;"	프레임워크 독립 라이브러리


프레임워크 종속 라이브러리
React	Vue.js
	파일:Pinia.svg

}}}}}}}}} ||

<colbgcolor=#ffffff,#1f2023><colcolor=#000,#fff> Zustand

라이선스	MIT 라이선스
분류	상태관리 라이브러리
\|

1. 개요2. 사용법

2.1. React2.2. React 외

[clearfix]

1. 개요

JavaScript용 상태관리 라이브러리이다.
기본적으로는 React 상태관리 라이브러리지만, 독립 상태 관리 환경도 제공하기 때문에 React 없이 사용도 가능하다.

2. 사용법

2.1. React

Zustand 는 기본적으로 React 상태관리 발상의 전환에서 시작했기 때문에 기본적으로 React 중심적인 API를 제공한다.

#!syntax sh
# npm, yarn, pnpm 동일
npm install zustand

저장소를 정의하는 예시는 아래와 같다.

#!syntax javascript
// /src/store/bear-store.js
import { create } from 'zustand'

export const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

위에 별도의 저장소를 첨부하여 React 컴포넌트에 사용한다.

#!syntax javascript
import { useStore } from './store/bear-store.js';

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>곰이 {bears}마리 있습니다.</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>한마리 추가</button>
}

2.2. React 외

하지만, Zustand 는 React 외에도 상태관리가 가능하다는 모토를 담고 있기 때문에 React 없는 환경에서도 상태를 관리할 수 있는 API를 제공한다.
설치는 동일하지만 첨부할 경로가 변경되며, 전용 API를 제공한다.

#!syntax javascript
import { createStore } from 'zustand/vanilla'

// X 좌표를 숫자만 받는 상태 초기화
const xStore = createStore()(() => 0)

const $dotContainer = document.getElementById('dot-container') // 점 표시할 공간
const $dot = document.getElementById('dot') // 점 요소

// 마우스 등의 포인터 위치 이동 시 이동한 X 좌표 상태 설정
$dotContainer.addEventListener('pointermove', (event) => {
  xStore.setState(event.clientX, true)
})

// 렌더링 함수 (X좌표 만큼 요소 이동)
const render = (x) => {
  $dot.style.transform = `translate(${x}px, 0)`
}

// 초기 렌더링
render(xStore.getInitialState(), xStore.getInitialState())

// 상태 구독
xStore.subscribe(render)

Zustand

1. 개요

2. 사용법

2.1. React

2.2. React 외

분류