[React] Zustand에 대해 알아보자 1편 - React 상태 관리 라이브러리

---

 

■ zustand란

■ zustand 설치

■ zustand 사용방법

---

 

안녕하세요. 오늘은 React 상태 관리 라이브러리 "Zustand"에 대해 설명해볼까 합니다. !

 

기본적으로 알고 있는 React 상태 관리 방법은 useState입니다.
간단한 컴포넌트 내부 상태라면 이걸로 충분히 해결할 수 있죠.

 

그런데 만약, 어떤 상태를 다른 컴포넌트에서도 사용하고 싶다면?
그때는 props로 하나하나 전달하게 됩니다. 

 

하지만, 상태를 여기저기 여러 곳에서 동시에 사용해야 한다면 이야기가 복잡해집니다.
이럴 때 필요한 게 바로 전역 상태 관리입니다. 😙

---

■ zustand란

: 공식 문서를 읽어보면, Zustand는 Hook 기반의 편리한 API를 제공하는, 심플하고 유연한 상태 관리 라이브러리입니다. 

 

Zustand는 독일어로 "상태"라는 뜻을 가지는데,

사용해본 입장으로써 정말 딱 상태 관리에만 집중한 라이브러리란걸 알 수 있었습니다. 👍🏻

 

사용방법도 아주 간단하고, Redux 처럼 복잡한 구조나 규칙이 없고, Context처럼 Provider를 여기저기 감쌀 필요도 없습니다. 덕분에 코드도 깔끔하고, 초보자인 저도 쉽게 이해할 수 있었습니다.

 

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

Zustand

---

■ zustand 설치 방법

npm install zustand

---

■ zustand 사용 방법

1. store 생성

store는 Hook으로, store 안에는 기본형, 객체, 함수 등 무엇이든 넣을 수 있습니다.

import { create } from 'zustand'

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

 

- create로 store를 만듭니다.

- set을 통해 상태를 업데이트 합니다.

---

2. store 사용하기

useStore()를 hook처럼 사용하면 됩니다. 정말 간단하지 않나요 ?  😵

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

---

 

오늘은 zustand에 대해 간단하게 알아보았습니다.다음 포스팅에서는 zustand에서 꼭 알아야할 필수 함수에 대해 포스팅하겠습니다.

 

https://leebaek.tistory.com/157

[React] Zustand에 대해 알아보자 2편 - React 상태 관리 라이브러리

---