[NextJS] Zustand 시작하기(1)

Zustand 대표이미지

 

필요성 

Web application을 제작하면서, Store(상태)를 관리하는 것은 매우 중요해졌습니다. 상태관리 라이브러리로 Recoil 역시 훌륭하지만, 이번 차례에서는 Zustand를 학습해보고자 합니다. 그 학습을 시작합니다. 

---

접근

 

  1. Installation (설치)

- npm install zustand

 

  2. Store 생성하기

 

  3. 컴포넌트 바인딩

 

---

방법

  1. Installation (설치)

(NextJS 또는 React 프로젝트를 생성 후 진행합니다.)

 

사용을 위해 npm 패키지로 설치부터 진행합니다.

# npm
npm install zustand

 - 이후 정상적으로 설치가 되었다면, 프로젝트 내 package.json 파일 > "dependencies"에 나열됨을 확인할 수 있습니다. 

 

---

  2. Store 생성하기

- Store를 생성합니다. (Store는 Hooks입니다.)

- 내부에는 primitives, objects, functions 등 무엇이든 넣을 수 있습니다.

- 함수 "set"은 상태를 병합합니다.

 

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

 

  3. 컴포넌트 바인딩

- 공급자가 없어도 어디에서나 hooks를 사용할 수 있습니다.

- 상태를 선택하면 해당 상태가 변경될 때 소비 구성 요소가 다시 렌더링됩니다.

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

 

 

---

이상으로, Zustand 학습을 시작해봤습니다.

추가 질문을 댓글을 달아주시면 감사하겠습니다^^!

오늘도 파이팅입니다!