쉬워도 이렇게 쉬울수없는 Zustand

 

store와 create만 기억하면 됨

https://zustand-demo.pmnd.rs/

Zustand

Zustand는 크기가 작아서 가볍고 빠르며 확장성이 좋은 전역 상태 관리 라이브러리다.
이름부터 뭔가 특이한데, 독일어로 상태라는 뜻이라고 한다. 발음은 쭈스탄트 정도로 읽으면 된다

 

import { create } from 'zustand'
export const use이름Store = create((set, get) => { //set은 상태 업데이트할 때, get은 현재 상태 가져올 때 씀
  return {
    상태: 초깃값,
    액션: 함수
  }
})

 

Zustand에서는 create라는 함수로 store를 만든다. 그리고 이 store를 기반으로 동작한다.

Store가 뭐냐면, 간단히 말해서 애플리케이션의 상태를 저장하는 중앙 데이터 저장소라고 보면 된다.
쇼핑몰로 치면 창고 같은 개념이랄까. 필요한 물건들을 한곳에 모아두고 필요할 때 꺼내 쓰는 거지.

그래서 Zustand 쓸 때는 무조건 create 함수로 store 생성하는 것부터 시작한다고 보면 된다.

 

참고자료

https://yunicornlab.tistory.com/100

zustand가 뭐야 어떻게 써

 

진짜 강점은 미들웨어

기본 사용법은 공식 문서나 다른 블로그에도 많으니까 생략하고, Zustand의 진짜 강점인 미들웨어에 대해 얘기해보려고 한다.

미들웨어는 store에 추가 기능을 끼워넣을 수 있는 방법이다.
Redux를 써봤다면 Redux 미들웨어랑 비슷한 개념이라고 보면 되는데, Zustand는 이게 훨씬 간단하고 직관적이다.

 

주요 미들웨어 종류

 

Zustand에서 제공하는 주요 미들웨어들을 간단히 소개하면 이렇다.

combine 
: 여러 개의 store를 합쳐서 하나로 만들어준다. 상태를 모듈별로 나눠서 관리하다가 나중에 합칠 때 쓴다.
immer 

: 불변성 관리를 편하게 해준다. 복잡한 객체나 배열 상태를 업데이트할 때 spread 연산자 남발 안 해도 되고, 그냥 일반 객체 다루듯이 코드 짜면 된다.

subscribeWithSelector 

: 특정 상태 값만 선택적으로 구독할 수 있게 해준다. 전체 store가 아니라 필요한 부분만 감시하고 싶을 때 유용하다.

persist

: 상태를 로컬스토리지나 세션스토리지에 자동으로 저장해준다. 새로고침해도 상태가 유지되어야 할 때 쓰면 딱이다. 로그인 정보나 사용자 설정 같은 거 저장할 때 많이 쓴다.

devtools

: Redux DevTools를 연동해준다. 크롬 확장 프로그램으로 상태 변화를 추적하고 디버깅할 수 있어서 개발할 때 엄청 편하다.

 

 

미들웨어 사용 문법 짱쉬움

미들웨어를 쓸 때는 괄호를 중첩해서 감싸는 방식으로 적용한다. 안쪽에서 바깥쪽으로 감싸진다고 생각하면 된다.

주스탠드가 러닝커브가 낮은걸로 유명하지만 쉬워도 이렇게 쉬울수가 없다

 

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

const useStore = create(
  devtools(
    persist(
      immer((set) => ({
        count: 0,
        user: { name: '', age: 0 },
        increase: () => set((state) => { state.count += 1 }),
        setUser: (name, age) => set((state) => {
          state.user.name = name;
          state.user.age = age;
        }),
      })),
      { name: 'my-store' }
    )
  )
);

 

이 코드를 보면 immer가 제일 안쪽에 있고, persist로 감싸고, 다시 devtools로 감싼 구조다.
실행 순서로 보면 immer가 먼저 적용되고, 그 다음 persist, 마지막으로 devtools가 적용된다고 보면 된다.

persist 같은 경우는 두 번째 인자로 옵션 객체를 받는데, 여기서 name은 로컬스토리지에 저장될 키 이름이다.

 

 

마무리

Zustand의 미들웨어는 복잡한 설정 없이 괄호 몇 개로 강력한 기능들을 추가할 수 있다는 게 진짜 장점이다.

Redux처럼 복잡한 보일러플레이트를 만날 필요도 없고, 그냥 필요한 미들웨어 import해서 감싸주기만 하면 된다.

처음엔 괄호 중첩이 좀 헷갈릴 수 있는데, 몇 번 써보면 금방 익숙해진다. 안에서 바깥으로 감싼다는 것만 기억하면 된다.