[JS/Zustand] 1. Zustand 주요 함수 정리

React 18.2 + Vite 환경에서 작성되었습니다.

 

SSAFY 공통프로젝트에서 전역 상태관리툴로 Redux대신 Zustand를 사용하기로 결정했다.
실습코치님께 여쭤봤던 다른 팀 친구가 6인 정도 규모의 프로젝트에서는 더 가벼운 Zustand사용을 추천받았다고 알려줬기 때문..
Redux는 아무래도 더 큰 엔터프라이즈급 툴인 모양임..

방학 동안 공부했던 Redux를 내려놓고 다시 Zustand에 대해 공부하며 주요 함수에 대해 정리했다.
Redux보다 훨씬 작고 가볍고, 짧은 Hook형식의 코드를 보며 왜 Zustand를 사용하는지 이해했음

0. Install

npm install zustand

---

1. Create

Store 생성 함수

 

현재 state와 setter를 저장할 store를 생성합니다.

import { create } from 'zustand';

// Store 생성하기
// 객체(object)를 반환합니다 → return { var: initial value, action: function }
// 콜백 함수의 파라미터는 ( set, get ,store )
const useCountStore = create((set, get, store)=>{
    return {
        // 1. 변수 선언 및 초기값 설정
        // 변수: 초기값,
        count: 0,
        // 2. 변수를 변경할 수 있는 액션 함수 설정 (useState에서의 set)
        // 액션: 함수,
        increaseCount: () => {set((state)=>{return {count: state.count + 1}})}
    }

---

1.1 Set

State 변경 함수

 

store 내 정의된 state를 변경합니다. set((state) => {return {state.var}})

import { create } from 'zustand';

const useCountStore = create((set)=>{
    return {
        // 1. set액션: (파라미터) => {set((state)=>{return {바꿀 변수: 바꿀 상태}})} 
        // 콜백 함수의 파라미터는 ( state ) → state는 현재 상태를 반환합니다.
        increaseCount: () => {set((state)=>{return {count: state.count + 1}})}
    }

---

1.2 Get

최신상태 조회 함수

 

state의 최신 상태를 반환합니다. get().var

React의 컴포넌트와 상태를 구독하지 않기 때문에, 상태가 변경되어도 컴포넌트를 리렌더링 하지 않습니다.

import { create } from 'zustand';

const useCountStore = create((get)=>{
    return {
        // 1. get액션: (파라미터) => {get().var}
        // 파라미터 없음
        getCount: () => {get().count}
    }

---

1.3 Store

import { create } from 'zustand';

const useCountStore = create((store)=>{
    return {
    }

언제 사용하는지 잘 모르겠음 ㅎㅎ;; 안 쓴다고 봐도 될 것 같음….

---

2. UseShallow

---

얕은 비교를 통해 상태의 일부 값만 구독하는 함수

 

특정 상태의 변경만을 감지하기 때문에 리렌더링을 최소화할 수 있습니다.

import useCountStore from './store'

const { count, name } = useCountStore(
  useShallow((state) => ({
    count: state.count,
    name: state.name,
  }))
);

 

useShallow를 사용하는 대신에, 객체(Object)로 한 번 더 감싸서도 얕은 복사를 통해 리 렌더링을 최소화시킬 수 있음.

  // 1. 따로따로 구독시켜주면 useShallow와 같은 효과를 줄 수 있음.
  const count = useCountStore((state) => state.count);
  const name = useCountStore((state) => state.name);

  // 2. store에서 객체로 한 번 더 묶어주면 useShallow 사용을 줄일 수 있음.
  export const useCountStore = create((set, get) => {
      return {
          count: 0,
          // 2-1. getter, setter로 묶기
          getter: {
              getCount: () => {get().count},
          },
          setter: {
              increaseCount: () => {set((state) => {return {count: state.count + 1}})},
              decreaseCount: () => {set((state) => {return {count: state.count - 1}})},
          },
      }
  })
  // 2-2. App.jsx에서 getter, setter로 구독시키기
  const CountButton = () => {
    const { increaseCount, decreaseCount } = useCountStore((state) => state.setter)
  }

  // 3. actions로 한 번 더 묶어서 사용하기
  export const useCountStore = create((set, get) => {
      return {
          count: 0,
          // 3-1. actions로 묶기
          actions: {
              getCount: () => {get().count},

              increaseCount: () => {set((state) => {return {count: state.count + 1}})},
              decreaseCount: () => {set((state) => {return {count: state.count - 1}})},
          },
      }
  })
  // 3-2. App.jsx에서 actions로 구독시키기
  const CountButton = () => {
    const { increaseCount, decreaseCount } = useCountStore((state) => state.actions)
  }