Zustand에 대해서 알아보기

개요

요즘 관심있게 살펴보는 부분이 리액트의 상태관리인데 예전부터 공부해보고 싶다고 생각했던 Zustand를 공부할 일이 생겨서 공부 + 정리를 하고자 한다.

 

Zustand란 ?

- 간소화된 Flux 원칙을 사용하고 작고 빠르게 확장 가능한 barebone 상태 관리 솔루션

barebone의 뜻

- Zustand란 독일어로 state룰 뜻한다

- Zustand는 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션

 

Zustand의 특징

- 상용구(boilerplate) 코드 감소

- Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링한다

- 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다

- Hooks를 사용하여 상태를 사용한다

- 컨텍스트 제공을 필요로 하지 않아 깨끗한 코드를 제공하므로 코드의 가독성이 높아진다

 

Zustand 설치

Zustand는 아래와 같이 npm으로 설치를 할 수 있다.

npm install zustand

 

Zustand 사용하기

1. create를 이용해 store 생성하기

Zustand 를 사용하기 위해서는 create 라는 method 로 상태 관리를 하는 store hook을 생성할 수 있다.

//useCounterStore.js
import create from 'zustand';

export const useCounterStore = create((set) => ({
    count : 1,
    increment: () => set((state) => ({count: state.count + 1})),
    reset: () => set({count: 0}),
    setNumber: (number) => set({count: number})
}));

set 함수를 통해서 객체, 함수, 숫자 등 다양한 상태를 병합할 수 있다.

2. store 가져와서 사용하기

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

const Counter = () => {
  const { count, increment, reset, setNumber} = useCounterStore();
  return (
    <div>
        <p>{count}</p>
        <button onClick={increment}>Increment</button>
        <button onClick={reset}>Reset</button>
        <button onClick={()=> setNumber(3)}>3</button>
    </div>
  )
}
export default Counter

 

useCounterStore에 저장된 count,increment , reset, setNumber 를 가져와 사용할 수 있다.

 

3. persist 적용하여 세션,로컬 스토리지에 저장해보기

zustand/middleware 에서 persist를 가져와서 사용할 수 있다.

import {persist} from 'zustand/middleware';
export const useCounterStore = create(
    persist(
        (set) => ({
        count : 1,
        increment: () => set((state) => ({count: state.count + 1})),
        reset: () => set({count: 0}),
        setNumber: (number) => set({count: number})
        }),
        {
        	name : 'counter'
        }
    )
);

 

기본적으로 persist는 명시해주지 않으면 정보를 로컬 스토리지에 저장한다.

name : 'counter'라는 이름으로 로컬 스토리지에 정보를 저장한 상태이다.

만약, 세션에 정보를 저장하고 싶다면 아래와 같이 변경할 수 있다.

{
	name : 'counter',
    	getStroage : sessiongStorage
}

 

가독성 높이기

위의 zustand 사용법을 그대로 사용해도 코드는 정상적으로 동작할 것이다.

하지만 혼자서 개발하는게 아니기 때문에 동료들이 쉽게 이해할 수 있는 코드를 작성하는것도 중요하다.

아래와 같이 개선할 수 있다.

import { persist,devtools } from 'zustand/middleware';

let counterStore = (set) => ({
    count : 1,
    increment: () => set((state) => ({count: state.count + 1})),
    reset: () => set({count: 0}),
    setNumber: (number) => set({count: number})
})

counterStore = devtools(counterStore);
counterStore = persist (counterStore, {name : 'counter'});

export const useCounterStore = create(counterStore);

 

짧은 코드지만 이전 코드보다는 훨씬 가독성이 좋아진것을 느낄 수 있다.

 

 마무리

평소에 관심있던 Zustand에 대해서 공부 + 정리를 해보았다. 확실히 이전에 분석했던 redux보다는 러닝 커브가 높진 않다고 생각이 드는데 아직 겉핥기만 해서 그런걸 수도 있다고 생각이 든다. 8월까지는 주말에 시간이 하나도 없이 너무 바빠서 글을 작성하는게 쉽지 않은데 틈틈히 조금씩 작성하도록 노력해보자.