[React] Zustand 로 상태 관리 해보기

 

들어가며

Zustand 는 독일어로 '상태(state)' 라는 뜻을 가진 라이브러리다.

 

아래의 특징을 가지고 있다.

• 특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)
• 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.
• Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
• React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다. (Transient Update라고 한다.)
• 동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)

Redux 와 유사하게 store 라는 개념을 사용해서 여러 상태(state)를 중앙에서 관리한다.

또한, 상태 관리하는 것의 특징 답게 상태값이 변경될 때만 구성 요소를 렌더링한다.

리덕스와는 다르게 provider 로 하위의 컴포넌트를 감싸주지 않아도 되서 간단하게 사용할 수 있다.

 

사용하기

공식에서 알려준대로 숫자를 1씩 더하거나 빼는 간단한 앱을 만들 예정이다.

 

1) 먼저, zustand 를 사용하기 위해 아래 커맨드로 패키지를 설치한다.

npm install zustand

 

2) store.js 라는 파일을 만들어서 그곳에서 create 함수로 스토어를 생성한다.

앞에는 use 라는 키워드를 붙여서 스토어 훅(Hook)을 만들어서 각 컴포넌트에서 사용할 수 있게 한다.

 

create 함수의 콜백 함수는 set, get 이라는 매개변수를 가지는데 

set 매개변수(함수) 는 상태를 변경할 수 있다.

get 매개변수(함수) 는 상태와 액션을 가진 스토어 객체(state) 를 얻을 수 있다.

 

import create from 'zustand'

export const useCounterStore = create((set) => ({
    count : 1,
    // set을 이용해서 state 변경
    increament : () => set((state) => ({count :  state.count + 1})),
    decreament : () => set((state) => ({count :  state.count - 1})),
    reset : () => set({count : 1}),
}))

 

위의 코드에서는 set 만 사용한다.

또한 상태명과 초기값을 정해준다.

위에서는 상태명을 count, 초기값을 1로 정했다.

액션명과 set 을 이용한 상태를 변경할 함수를 선언한다. 

위에서는 increament 라는 액션과 decreament 라는 액션을 만들었는데

각각 상태에서 1 씩 더하거나 1씩 빼는 함수다.

또한 reset 이라는 함수도 만들어서 count 값을 1로 되돌릴 수 있게 했다.

 

 

 

3) 위의 스토어를 사용하고자 하는 컴포넌트 내에서 스토어 함수를 호출한다.

import React from 'react'
import { useCounterStore } from '../store'

export const Counter = () => {
  const {count, increament, decreament, reset} = useCounterStore()
  return (
    <div>
      <p>{count}</p>
      <button onClick={increament}>one up</button>
      <button onClick={decreament}>one down</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

 

Counter 라는 컴포넌트에서 count(state) 와 각각 액션들을 불러오고,

버튼에 onClick 이벤트를 걸어주어, 각각의 액션들이 호출되도록 세팅했다.

 

 

4) 결과

 

 

 

 

Reference

 

https://zustand.docs.pmnd.rs/getting-started/introduction

Introduction - Zustand

https://www.heropy.dev/p/n74Tgc

Zustand 핵심 정리

https://velog.io/@mjieun/React-Zustand-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0-JavaScriptTypeScript

[React] Zustand 라이브러리를 사용하여 상태 관리하기 (JS/TS)