20260127 Zustand 공부

들어가며

유레카에서 프로젝트를 진행하면서 상태관리에 대한 이야기가 나왔다. zustand를 사용해보자는 얘기가 나와서 zustand를 공부해보려고 한다. 실제로 사용해보는 건 아직은 이르다고 생각이 들어서 적용은 못 하더라고 공부를 해두면 또 좋은 기회가 생길 것이라고 생각한다.

 

Zustand란?

Zustand는 독일어로 상태라는 뜻이고 React 생테계에서 사용하는 상태 관리 라이브러리이다.

 

Zustand는 왜 쓸까?

React에서 데이터는 단방향이다. 기본적으로 React의 데이터 흐름은 State & Props를 사용해 단방향으로 이루어져야 한다는 원칙이 있기 때문이다.

출처 : http://www.tcpschool.com/react/react_data_state

 

이러한 데이터 흐름은 단순하고 예측 가능하며, 컴포넌트 간의 관계를 명확히 정의하기 때문에 유지 보수성을 향상시킨다.

 

하지만 데이터를 전달하는 과정에서 거쳐야 하는 컴포넌트가 너무 많은 상황이라면,

최상위 부모 컴포넌트에서 상태나 데이터를 가지고 있고 중간에 위치한 하위 컴포넌트가 해당 데이터가 필요하지 않더라도 데이터를 받아야 되고 여러 컴포넌트를 통과하여 목적지에 도착해야되는 경우가 생긴다.

 

이를 prop drilling이라고 한다.

 

이렇듯이 상태는 여러 페이지, 프로덕트 전반에 걸쳐 공통으로 사용하는 경우가 있기 때문에 상태 관리 라이브러리가 등장하게 되었다.

Zustand의 스토어 구조와 접근

스토어(Store)는 애플리케이션의 여러 상태(State)를 중앙에서 관리하는 패턴을 말한다.

이를 통해 컴포넌트 간 데이터를 쉽게 공유하고 데이터 변경을 감지해 자동으로 렌더링할 수도 있다.

 

Zustand 사용 방법

Zustand 설치

 

store 생성

import { create } from 'zustand';

interface CounterState {
  count: number;
  increase: () => void;
  decrease: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

 

• create 안에 상태와 상태 변경 함수를 정의한다
• set 함수로 상태를 변경하며, 이전 상태를 기반으로 계산할 수도 있다

컴포넌트에서 사용하기

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

export const Counter = () => {
  const { count, increase, decrease, reset } = useCounterStore();

  return (
    <div>
      <h2>카운트: {count}</h2>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

 

 

• Zustand 스토어를 훅처럼 불러와서 사용한다
• 상태를 구독하고 있어 변경되면 자동으로 컴포넌트가 리렌더링된다

선택적 구독 (성능 최적화)

const count = useCounterStore((state) => state.count); // count만 구독
const increase = useCounterStore((state) => state.increase); // increase만 가져오기

 

필요한 상태만 선택해서 구독하면 불필요한 리렌더링을 줄일 수 있다.

 

느낀 점

Zustand에 대해 공부해봤는데 실제로 사용해보고 적용해보지 않아서 와닿지는 않지만 새로운 걸 배우는 재미가 있었다. 리액트의 상태관리에 zustand가 쓰인다는 것을 알았고 대략적은 문법도 알 수 있었다. 다음 프로젝트에 사용해볼 수 있으면 꼭 적용해봐야겠다.