Zutsand

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

​

​

귀여운 곰돌이 zutsand에 관하여 오늘은 알아보는 시간을 가져보자

​

꿀​을 굉장히 좋아할거 같은 이 귀염둥이는 zutsand 굉장히 유용한 아이라고 볼 수 있다.

​

자 보자 리엑트에서는 React에서 초반에는 useState와 props만으로도 상태관리가 용이하지만 이것이 커지면 커질수록 관리하기가 불편해진다.

하지만 컴포넌트가 많아지고 서로 멀리 떨어진 컴포넌트들이 같은 데이터를 필요로 하기 시작하면 상황이 달라진다.

즉 이것을 여러 집 뛰어다니면서 수배하고 다시 가져오고 반복하는 행위를 한다보는데 이것 또한 양이 많아지면 어떻게 되겠는가..

​

그니까 계속 던지고 던지고 족보로 치면 내가 가진걸 부모->자식->자식의 자식->자식의 자식의 자식 이런 느낌으로 드로잉한다 이것을 우리는 props drilling 라고 부른다.

​

그리하여 출동한 zutsand 전역적으로 상태를 관리한다.

​

모든 중요한 꿀(상태)를 한 곳(Store)에 모아두고 필요한 곰돌이(컴포넌트)가 직접 와서 꺼내 쓰게 해주는 구조다.

==> Store = 전역 상태 저장소

​

이러면 이제 집집마다 쌀 받으러 안 찾아 다녀도 된다. 필요한거만 골라 시키는 거의 쿠x급의 배송 주문

즉 내가 필요한 만큼만 꺼내 쓰고 일일히 찾지 않아도 되고 곰돌이가 지켜주고 있으며 든든하다.

즉 흩어진 꿀들을 꿀단지 하나에 넣고 맛별로 꺼내 쓰는 용도

굉장히 유용하여 기용하는 곳들이 많다 하니 확실히 써먹으면 좋은 녀석이다.

​

npm install zustand

간단히 설치후 사용한단면

​

예시 코드

import { create } from "zustand"; //store생성

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

function Counter() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
} //store 만든 꿀단지를 컴포넌트에 사용

store라는 꿀단지를 한 번 만들어두면 각 컴포넌트에서 바로 가져다 쓸 수 있다. 야미

이리하여 매번 useState, count + 1 같은 코드를 컴포넌트마다 반복해서 쓰지 않아도 되고 자주 쓰이는 상태는 store에 꽁쳐두고 필요한 곳에서 간단히 꺼내 쓰면 된다!