??? : 너 오늘 zustand 안좋아 보여 - zustand 사용기

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

zustand의 특징으로는 작은 패키지 용량과, 쉬운 사용 방법 그리고 곰돌이가 귀엽다는 장점이 있다

패키지  용량

다른 상태 관리 라이브러리와 비교해 봤을때 상당이 작은 용량이다 - recoil > mobx > zustand

 

쉬운 사용 방법

나는 zustand를 동아리 프로젝트에서 사용하는것을 보고 사용해 봤는데 사용해 봤는데 사용하기 너무 쉬웠다

곰돌이

말 그대로 귀엽다 :)

---

이제 한번 사용 방법을 알아보자

사실 너무 간단하다!

 

store 생성하기

import { create } from "zustand";

export const useCountStore = create((set) => ({
  count: 0,
  increase: () => set(({ count }) => ({ count: count + 1 })),
}));

 

create 함수를 사용해서 만들 수 있다

create 함수의 인자로는 함수를 받고 인자로 받은 함수는 객체를 리턴해야 한다

객체 안에는 만들고 싶은 state와 set 키워드를 사용한 state 업데이트 메서드를 만들수 있다

 

위에 있는 코드를 보면 나는 간단한 counter를 만들기 위해서 count라는 state를 만들었고

count의 값을 증가시키는 increase 메서드를 만들었다

 

store 사용하기

import { useCountStore } from "./countStore";

function App() {
  const { count, increase } = useCountStore();

  return (
    <div>
      <h1>count : {count}</h1>
      <button onClick={increase}>+1</button>
    </div>
  );
}

 

store를 사용할때는 만들었던 store를 그대로 함수로 사용해 사용하면 된다!

 

state 업데이트 하기

store를 생성할때 같이 state를 업데이트하는 메서드를 만들 수도 있지만 따로 만들어 줄 수도 있다

 

import { useCountStore } from "./countStore";

export const increase = useCountStore.setState((state) => ({ count: state.count + 1 }));

 

이렇게 setState를 사용해서 state를 업데이트하게 만들 수 있다

근데 나라면 상황에 따라 다를지 모르겠지만 굳이 따로 안만들고 store를 만들때 같이 만들것 같다

 

마무리

zustand에 대해 알아보았는데 생각보다 배우기 쉽고 사용하기 간편해서 왜 사용하는 사람이 많아지고 있는지 알게 된거 같다

나중에 내가 프로젝트에 도입할 일이 생긴다면 따로 정리해서 블로그를 작성해보겠다