리액트 zustand란?

React zustand

이번 글은 리액트의 상태 관리 라이브러리 중 하나인 zustand를 알아보도록 하겠다.

---

리액트 zustand란?

프론트엔드에서 상태는 렌더 하는 데 있어서 영향을 미칠 수 있는 값을 뜻한다. 상태를 어떻게 관리하느냐에 따라 웹을 렌더 하는데 영향을 미칠 수 있다.

즉, 프론트엔드 개발자에게 상태관리는 중요한 임무가 되었다.

리액트는 독립적인 컴포넌트 단위로 구성되어 있다. useState hook을 사용하여 하나의 컴포넌트에서 상태를 관리하고 props를 통해 부모-자식 간에 상태를 전파할 수 있다.

상태가 시작된 지점과 어떤 컴포넌트를 거쳐가는지, 모든 흐름을 이해하고 기억한다면 useState와 props를 사용하는데 무리가 없다. 하지만 프로젝트의 규모가 커짐에 따라 관리해야 할 상태의 개수는 늘어날 것이다.

그렇기 때문에 상태관리 툴을 사용해 효율적으로 상태를 관리할 필요가 있다. 이때 상태관리를 용이하게 만드는 라이브러리가 몇 개 있는데, 그중 zustand가 존재하는 것이다.

문법도 정말 쉽고 직관적이다.

예시코드

3-1. Zustand 설치

npm i zustand

터미널에 위 명령어를 입력하여 Zustand 라이브러리를 설치한다.

3-2. Store에 State 만들기

// ./stores/memos.js
import create from 'zustand';

const useMemosStore = create((set) => ({
  memo: '',
  setMemo: (text) => set({ memo: text }),
  memos: [],
  setMemos: (newMemo) =>
    set((prev) => ({
      memos: [...prev.memos, newMemo],
    })),
}));

export default useMemosStore;

useState 로 관리했던 상태를 store로 옮겼다.

memo와 memos 에는 초기값을 넣는다.
setMemo 와 setMemos는 매개변수를 지정하고 어디에 어떻게 값을 넣을지 정한다.

setMemo 의 경우, text라는 값이 들어오면 memo에 text를 넣는다.

setMemos 의 경우, 기존 memos에 새로운 값인 newMemo를 추가해야 하므로 prev 매개변수를 활용한다.
이때 useState와 다른 점은 스프레드 연산자를 사용할 때 prev.memos 와 같이 뒤에 타깃이 되는 배열명을 넣어야 하는 것이다.

3-3. Store 사용하기

// ./App.js
function App() {
  return (
    <div>
      <h1>메모 작성하기</h1>
      <Form />
      <Memos />
    </div>
  );
}

더 이상 App.js 에서 상태를 관리할 필요가 없다.

내가 프로젝트에서 쓴 실제 코드

import { create } from 'zustand';
import {
  PCimagesChina,
  PCimagesDessert,
  PCimagesJapan,
  PCimagesKorea,
  PCimagesRest,
  PCimagesSchool,
  PCimagesUS,
} from '../constants/PCdata';

// zustand
const useCategoryStore = create((set) => ({
  currentCategory: '중식',
  setCurrentCategory: (category) => set({ currentCategory: category }),
  getCategoryImages: (categories) => {
    const categoryData = {
      중식: PCimagesChina,
      일식: PCimagesJapan,
      양식: PCimagesUS,
      한식: PCimagesKorea,
      분식: PCimagesSchool,
      후식: PCimagesDessert,
      기타: PCimagesRest,
    };
    return categoryData[categories] || [];
  },
}));

export default useCategoryStore;

---

(참고한 글)

https://velog.io/@yeonsubaek/React-Zustand%EB%A1%9C-%ED%8E%B8%EB%A6%AC%ED%95%98%EA%B2%8C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

https://hyunki99.tistory.com/111

https://www.heropy.dev/p/n74Tgc

---

(유튜브 영상)

https://youtu.be/zNHZJ_iEMPA?si=GyQh8QGOSz_WrJIs

---