[React] React 상태 관리 라이브러리 Zustand

Jaehyun Ahn·2023년 8월 2일

이전까지 프로젝트를 진행할 때는 최상위 컴포넌트인 App.js에서 모든 데이터를 관리하고, 각 컴포넌트에 데이터를 props로 넘겨주는 방식으로 작업했다. 하지만 이 방식으로 진행한다면 props 전달 depth가 깊어진다.는 문제점이 발생하게 된다.

이를 해결하기 위해 전역 상태관리 라이브러리 적용의 필요성을 느꼈다.

보통은 상태관리를 Redux를 많이 사용하는 것으로 알고 있지만, Zustand의 사용법이 간단하다고 하여 학습을 진행했다.

Zustand에 대해 학습한 것을 기록하려고 한다.

Zustand란 ?

간소화된 Flux 원칙을 사용하는 작고 빠르고 확장 가능한 barebone(매우 간단한) 상태 관리 솔루션
'Zustand'는 독일어로 'State'(상태)를 의미한다.
Zustand는 Jotai 및 react-spring 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션이다.

Zustand 특징

상용구 코드 감소 (이 라이브러리를 사용하기 위해 필요한 코드의 수를 감소 시킴.)
Zustand는 상태 값이 변경될 때만 구성 요소(컴포넌트)를 렌더링한다. 구성 요소를 다시 렌더링하지 않고도 상태 변경을 처리할 수 있는 경우가 많다.
상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트 된다. 이 점에서 Redux와 유사하지만 개발자가 상태를 처리하기 위해 Reducer, Action 및 Dispatch를 만들어야하는 Redux와 달리 Zustand는 훨씬 쉽다.
Hooks를 사용하여 상태(state)를 사용한다
컨텍스트 제공을 사용할 필요가 없어 깨끗한 코드를 제공하므로 코드가 더 짧고 가독성이 높다.

Zustand의 특징은 다른 라이브러리보다 간단하게 사용할 수 있다는 것이다. 보일러플레이트 코드가 길지 않아서 편하다고 한다.
(보일러플레이트 코드란 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.)

Zustand 설치 방법

npm install zustand --save

혹은

yarn add zustand

간단하다.

Zustand를 이용한 카운터 앱

Store 생성하기

스토어를 생성하여 원하는 값(state)과 그 값을 업데이트 해주는 함수를 만들어준다.

Store는 Hooks로 되어있다.
Store에는 객체, 함수 등 무엇이든 넣을 수 있다.
Store를 생성항 때는 create 매서드를 사용하여 선언한다.
set 함수는 상태(state)를 변경한다.

import { create } from "zustand";

export const useCounterStore = create((set) => ({
  count: 1,
  increse: () => set((state) => ({ count: state.count + 1 })),
}));

useCounterStore라는 store를 만들었다.
state는 count이고, count를 1씩 증가시켜주는 함수는 increse 이다.

Counter 컴포넌트 생성 및 Store 이용하기

import React from "react";
import { useCounterStore } from "../Store";

const Counter = () => {
  const { count, increse } = useCounterStore();

  return (
    <div className="counter">
      <p>{count}</p>
      <button onClick={increse}>1씩 증가</button>
    </div>
  );
};

export default Counter;

Counter 컴포넌트에서 이전에 만들어준 Store Hooks(useCounterStore)를 불러왔고, count 숫자와 1씩 증가 시켜주는 버튼을 배치했다.

실행 결과 1씩 증가 버튼을 누르면 위의 숫자가 증가되는 것을 확인할 수 있었다.

간단한 예시이지만 Zustand를 처음 사용해보는데도 불구하고 쉽게 사용할 수 있겠다는 생각이 많이 들었다. Store 생성 과정에서 함수 선언 방법만 익숙해진다면 유용하게 쓸 수 있을 것 같았다. 아직은 개념만 익힌 상태라 더 많은 개념 및 예시들을 찾아보며 더 학습해 볼 필요가 있다.

진행중인 프로젝트에서 Zustand로 로그인 상태 관리를 하게 될 예정이다. 시나리오를 구상해본다면