zustand(쥬스탠드)로 사용으로 전역상태 관리하기 (사용법)

 

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

Zustand

 

프론트엔드에서 자주사용 하는 전역상태를 관리하는 라이브러리가 몇 개 있다
대표적으로 Redux, recoil, zustand 세 가지가 있는데 그중 현재 내가 자주 사용하고 있는

zustand의 사용법이다

 

먼저 zustand는 store란 개념이 있는데 쉽게말해 store에 내가 사용하는 상태와 상태를 조작할 수 있는 함수를 넣고 필요한 컴포넌트에서 사용하는 방식이다

 

zustand의 장점을 말해보자면

1. 불필요한 상태변화에 따른 렌더링을 최소화 한다 (속도 개선)

2. 쉽다!!

 

root 경로여도 되고 next.js라면 page경로여도 상관없다 Store set을 관리할 store 폴더를 만들어주고 basicStore.tsx를 만들었다

// root/store/basicStore.tsx
import { create } from "zustand";

interface BasicStoreState {
  count: number;
  increasePopulation: () => void;
  removeAllCount: () => void;
}

const useBasicStore = create<BasicStoreState>((set) => ({
  count: 0,
  increasePopulation: () => set((state) => ({ count: state.count + 1 })),
  removeAllCount: () => set({ count: 0 }),
}));

export default useBasicStore;

 

basicStore안에 있는걸 살펴보자면

count : 상태(State)

increasePopulation : 카운트 + 1을 담고 있는 함수

removeAllCount : 카운트를 0으로 초기화하는 함수

이렇게 구성 되어 있다

 

이제 내가 사용하고자 하는 컴포넌트로 돌아가 해당 Store를 import 하고 사용하기만 하면 끝이다

매우 간단하다 하지만 사용할 수 있는 범위는 매우 넓다

 

// Home Component
import styles from "@/styles/Home.module.css";
import useBasicStore from "@/store/basicStore";

export default function Home() {

  const { count, increasePopulation } = useBasicStore();
  
  return (
    <main className={`${styles.main} ${inter.className}`}>
      <div>{"zustand"}</div>
      <div>{count}</div>
      <button onClick={increasePopulation}>{"카운트 + 1"}</button>
    </main>
  );
}

 

 

카운트 버튼을 눌렀을때 + 1 씩 적용되는 걸 확인할 수 있다

사용법의 전부이다 하지만 지금부터 할 얘기가 중요하다 이런 간단한 기능이 왜 강력하다고 하는 것일까??

 

우선 내가 생각하는 zustand를 제대로 활용하는 방법이다

 

Data Fetch

useEffect를 통한 데이터 패치(호출) 방식을 많이들 사용하고 있다 하지만 리액트 업데이트 문서에서 보면 이는 더 이상 권장되는 사용방법이 아니다 외부(전역상태 라이브러리)를 통한 데이터 패치와 핸들링을 권장하고 있다

 

이는 장점 첫 번째로 말한 불필요한 데이터를 리렌더링 하는 과정을 최소화하는 것에 있어 데이터 패칭으로 인한 웹이나 앱 속도를 엄청나게 상승시켜준다

 

React 라이프사이클과 상태 업데이트를 깊게 이해하고 사용하는 개발자라면 큰 상관없겠지만 그게 아니라 컴포넌트마다 useEffect를 사용하고 불필요한 상태 업데이트로 여러 번 렌더링이 되는 (내가 그럼...) 개발자가 있다면 zustand 도입을 강력 추천한다

 

웹(Storage), 앱(AsyncStorage)

웹에서는 로컬스토리지, 세션스토리지 와 앱에서는 AsyncStorage 같은 스토리지를 많이 사용한다

어떤 상태를 사용자가 종료하고 다시 접속했을 때도 유지하고 보여주고 싶을 때가 있다

 

zustand는 스토리지와 함께 사용하면 매우 좋다

나는 RN Splash 화면에서 필요한 스토리지 정보들을 zustand에 담아 가져오고 메인 root로 넘어가게 구성을 시켰는데 이렇게 하면

상태를 기억하는 과정 자체를 여러 번 할 필요 없이 한번 하는 것 만으로 사용자가 앱을 종료할 때까지 사용할 수 있기 때문이다

 

또한 이 상태를 다른 스크린에서 props 드릴링 없이 사용할 수 있다는 점 또한 부가적인 좋은 점일 수 있겠다

 

마무리

이렇게 zustand를 사용하는 방법을 알아보았다 요즘 리액트 개발에서 전역상태관리는 빼놓을 수 없는 부분이 되었으면

프로젝트 처음부터 전역상태관리 라이브러리를 도입하고 들어가는 경우도 많다

 

redux의 복잡한 관리에 머리가 아프다면 zustand 도입도 고려해 보자!