100824 TIL

 

 

 

 

 

zustand  리액트에서 상태관리를 도와주는 라이버리 

 

앱 안에서 여러 곳으로 공통적으로 쓰이는 데이터  (상태)를 한 곳에서 관리하고 필요할때 가져다 쓸 수있도록 

 

쓰는이유 

 

간단함 리덕스보다 훨씬 가벼와서 설정이 쉽다 

 

빠른 성능 : 필요할때 만 상태를 업데이트 해서 불필요한 렌더링을 줄여줌 

 

편리함 : 코드가 짧고 간결해서 사용하기 편리 

 

 

예시 

 

import create from 'zustand'

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

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

 

직관적인 API 를 제공해 상태를 관리함 . 

 

create 함수를 사용 해서 상태를 초기화 , 상태를 업데이트하고 구독 할 수 있다 

 

리엑트 HOOKS 와 함께 사용됨 

 

디버깅 이 편함 

devtools 확장 프로그램 사용 , 

상태 변화를 모니터링 하고 디버깅 할수있다 ! 

 

zustand 는 redux 보다 훨씬 가볍고 간단 하다 

 

단순한 상태 관리에 아주 최적화 되어있다 

---

 

리덕스 :설정과 사용법이복잡  , 처음 배우기 어렵다 . 기본 개념이 많아서 익숙해지려면 시간이 걸림 

 

주스탠드 : 매우 간단 , 배우기 쉽고 사용하기도 편함 . 

 

 

설치방법 : yarn add zustand