Zustand / 작고 빠르고 확장가능한 베어본 상태 관리 솔루션 [1]

- 이 글은 zustand 공식문서와 youtube의 각종 강의를 참고하여 작성하였습니다 -

---

귀엽다고 무시하지 마세요.
무서운 발톱이 있어 많은 위험을 처리할 수 있거든요

 

zustand 공식 문서에서 zustand를 소개하는 첫 문장이다.

여기서 위험은 redux나 react context가 가진 다른 문제점을 의미한다.

zustand는 독일어로 상태를 의미한다. 즉 라이브러리 이름이 그냥 상태임.

 

이번에 어떤 과제를 하면서, 해당 라이브러리를 써볼 기회가 있어 정리를 하려고 한당.

그렇기 때문에 다른 라이브러리와의 비교나 철학같은건 일단 묻어두고 기능을 위주로 정리해봄.

---

[Install]

뭐든 쓸려면 설치해야한다.

npm install zustand # or yarn add zustand

 

[Create a Store]

우선 기본 개념은 리덕스처럼 Store란것이 있다.

정말 마음이 불편하지만, 리덕스 공부할려고 리덕스 글 하나 쓰자마자 이렇게 쭈스탄드에 대해 먼저 공부해야할줄은 몰랐다.

또 한편 다행인건 리덕스의 스토어 개념을 조금이나마 알고 글은 쓴다는것이지.

 

스토어는 하나의 훅같은 개념인데, 뭐든지 될수있다.

그냥 데이터 저장하는 곳이라고 생각하면 됨

 

import create from 'zustand'

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

 

zustand에서 create를 바로 임포트해와서 스토어를 만들어준다.

create는 set함수를 인자로 받아서 객체를 return해준다.

 

객체에는 기본적으로 뭐든지 정해줄수 있는데, 위에서는 bears라는 값의 default값,

그리고 bears의 값을 변경시키는 다양한 set 함수들을 정의했다.

 

이 값과 매서드를 사용하는 방법을 알아보자.

 

[Bind your Components]

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

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

위에는 리액트 코드 기반임.

사용을 하기 위해서는 위에서 지정해준 스토어를 그대로 들고와서 사용한다.

스토어는 기본적으로 상태 객체를 인자로 받아서 내가 할 행동을 선택해서 return 해줄 수 있다.

 

조금 말이 꼬였는데, 맨 윗줄의 예시를 컴퓨터처럼 이야기해보자면

 

1. bears 라는 변수 지정해서 값넣어 줄건데

2. useBearStore라는 스토어 사용할거임

3. 요녀석은 기본적으로 스토어에서 정해준 상태를 들고옴

4. 상태 객체로 지정해줬으니까 key값만 입력해줌

 

이렇게 하면 그 key의 value 값이 리턴됨

 

이렇게 보일러 플레이트가 없을수가있네

 

만약 특정 행동(위에서는 매서드의 실행이고, Reudx같은데서는 action 이라 지칭할듯)을 하고 싶다면

똑같이 스토어에서 원하는 객체의 키만 적어주면 그 행동이 실행됨

 

 

 

아주 기본적인것만 적어봤고 이어서 공식문서 아래있는 다양한 개념을 필요에 따라 하나씩 공부해볼 예정