React에서 Zustand로 전역 상태 관리 1분 만에 편하게 하기 - 1

Zustand란?

jotai를 만든 일본의 개발자 분이 만든 전역 상태 관리 라이브러리입니다.

기존 Redux처럼 코드가 지저분하고 복잡하지 않으며 Context Api처럼 불필요한 리랜더링을 일으키지 않도록 제어하기도 쉽습니다.

게다가 용량도 적으며 디버깅을 위한 devtools까지 지원됩니다.

(Context API 단점 참고)

Context Api를 활용한 상태 관리

Zustand설치

터미널에서 npm 혹은 yarn, pnpm zustand 명령어로 설치합니다.

npm install zustand # or yarn add zustand or pnpm add zustand

Zustand 사용법

우선 Redux를 사용할 때처럼 Provider를 선언할 필요는 없습니다.

 

가장 흔하게 예시를 드는 방식으로 예시를 들어 설명하겠습니다.

저희는 여러 개의 버튼에 zustand를 이용하여 count라는 값을 관리해보려 합니다.

+ 버튼을 누르면 숫자 1이 올라가고

- 버튼을 누르면 숫자 1이 내려가고

? 버튼을 누르면 파라미터(매개변수) 값으로 넘겨준 만큼 숫자가 +되는

counter를 만들려 합니다.

Counter.js

import React from 'react';

const Counter = () => {
  return (
    <div>
      <h1></h1>
      <div>
        <button onClick={() => null}>+1</button>
        <button onClick={() => null}>-1</button>
        <button onClick={() => null}>?</button>
      </div>
    </div>
  );
};

export default Counter;

위 내용에서 <h1>에는 현재 count를, 각각의 버튼에는 onClick 이벤트 실행 시 count를 +,- 할 함수를 zustand를 이용해서 넣어주겠습니다.

 

 새로운 파일을 하나 만드신 후 아래와 같이 진행합니다.

store.js

//1. zustand를 이용해 상태를 관리 할 함수를 만들기 위해 create를 import합니다.
import { create } from 'zustand';

//2. hook을 만드는 것처럼 객체를 리턴하는 형태의 함수를 만들어 줍니다.  
//예시 const useTest = create((set)=>({}))

export const useCounterStore = create((set) => ({
  coount: 0,
  onIncreaseCount: () => set((state) => ({ count: state.count + 1 })),
  onDecreaseCount: () => set((state) => ({ count: state.count + 1 })),
  onParameterCount : (val) => set((state) => ({ count: state.count + val })),
}));
//count라는 state와 초기값 선언
//onIncreaseCount라는 set함수를 리턴하는 형태로 수정, setState와 비슷하다고 생각하면 편함
//onDecreaseCount라는 set함수를 리턴하는 형태로 수정, setState와 비슷하다고 생각하면 편함
//onDecreaseCount는 val 값을 받아와 사용하는 예시를 위해 작성

이제 store.js라는 파일에서 저희가 사용할 함수를 만들어 줬기에 Counter.js에 직접 적용해 보겠습니다.

Counter.js

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

const Counter = () => {
  const { count, onIncreaseCount, onDecreaseCount, onParameterCount } = useCounterStore();
  
  return (
    <div>
     <h1>{count}</h1>
      <div>
        <button onClick={() => onIncreaseCount()}>+</button>
        <button onClick={() => onDecreaseCount()}>-</button>
        <button onClick={() => onParameterCount(3)}>?</button>
      </div>
    </div>
  );
};

export default Counter;

위와 같이 객체 구조분해할당 useCounterStore에서 사용할 객체를 가져온 후 바로 사용하면 된다.

 

물론 위 예시뿐만 아니라 다양한 형태로 사용가능하며 많이 사용하는 ajax요청 또한 아래와 같이 간단하게 가능하다.

store.js

import { create } from 'zustand';

export const useGetApi1 = create((set) => ({
getApi: async () => {
    const response = await fetch('api주소');
    console.log(await response.json());
  },
}));

//혹은 아래와 같이도 사용

export const useGetApi2 = create((set) => ({
  loading: false,
  data: null,
  error: null,
  fetchData: async () => {
    set({ loading: true });
    try {
      const response = await fetch('api주소');
      const data = await response.json();
      set({ data, loading: false });
    } catch (error) {
      set({ error, loading: false });
    }
  },
}));

위와 같은 방식들 처럼 다양하게 활용하여 사용이 가능하다.

마치며

이제 Zustand 라이브러리의 기본 개념과 활용 방법에 대해 알아보았습니다.

Zustand를 사용하면 React에서 전역 상태를 쉽게 관리할 수 있으며, 복잡한 상태 업데이트 로직을 가독성 좋게 구성할 수 있습니다.

 

이후 devtools를 이용하여 디버깅을 하거나 다른 미들웨어를 활용하는 방법들도 많지만 정말 간단하게 사용법만 작성하고자 작성한 1편의 글이라 여기서 마치려 합니다.

 

아래 참고 링크를 통하여 더 깊이 있는 내용을 이해하고 많은 사용법을 찾아보시고 개발에 도움이 됐으면 합니다.

참고

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

github : https://github.com/pmndrs/zustand