[React] Zustand 에 대해서 (React 상태관리)

들어가기 전

최근에 간단한 프로젝트를 해보려고 시도하고 있었다. 어떤 라이브러리가 필수적으로 쓰이며, 많이 쓰이는지 찾던 중

Zustand라는 것을 알게 됐다. Zustand가 무엇이며 뭐가 좋으며 예제에 대해서 알아보는 시간을 가져보자

 

 

Zustand 란 무엇인가?

Zustand라는 말은 독일어로 '상태' 라는 말을 의미한다.

이걸 통해서도 상태에 관한 무엇인가를 우리는 유추할 수 있다.

Zustand는 가벼운 상태 관리 라이브러리로, Redux보다 간결하고 사용하기 쉽다.

 

Zustand를 알기 위한 필수 개념

1. Store

> store는 애플리케이션의 전역 상태(state)를 저장하고 관리하는 공간입니다.

React에서 일반적으로 상태는 useState나 useReducer를 사용하여 개별 컴포넌트에서 관리

(useState처럼 종속되지 않음.)

 

이렇게 하면 컴포넌트 간에 공유해야 하는 상태가 많아질수록 관리가 어려움.

Store를 사용하면 모든 컴포넌트가 같은 상태를 공유하고 쉽게 접근할 수 있습니다.

 

2. 상태 업데이트

set 함수를 이용해 상태를 변경합니다.

기존 상태를 직접 변경하지 않고 불변성을 유지해야 합니다.

 

3. 전역 상태 사용

• useStore를 컴포넌트에서 사용하여 상태를 가져오거나 변경한다.

 

4. 미들웨어 사용 (선택 사항)

• persist: 로컬스토리지에 상태를 저장하고 유지하는 기능.

• devtools: Redux DevTools와 연결하여 상태를 디버깅할 수 있는 기능.

 

이번 글에서는 미들웨어 사용은 다루지 않을 것이다. 나중에 기회가 있으면 다뤄보려고 한다.

 

Zustand 사용 예제 및 설명

import { create } from 'zustand';

// store 생성
const useStore = create((set) => {
  count: 0,
  increase: set((state) => ({ count: state.count + 1})),
  decrease: set((state) => ({ count: state.count - 1})),
});

function App(){
  const { count, increase, decrease } = useStore();
  
  return (
    <>
      <div>Count: {count}</div>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </>
  )
};

 

 

사용하면서 느낀 점

일단 코드가 간단하여 쓰기 편하다는 것이 제대로 느껴지는 라이브러리라는게 생각이 든다.

당분간 자주 이용할 라이브러리가 될 것 같다.