ZUSTAND

ZUSTAND에 관심을 갖게 된 이유

npm trends에 따르면 redux 다음으로 가장 핫한 상태관리 라이브러리,

꾸준하게 상승중이고 상승폭도 가장 커 다음 프로젝트에는 Zustand를 사용해보려고 한다.

 

왜 ZUSTAND가 핫할까?

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

Zustand

 

1. 직관적이고 간편한 사용법

ZUSTAND 메인페이지와 Documentation에서 사용법을 살펴보면

npm install zustand

 

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

 

이게 끝.

정말 쉽게 사용할 수 있다.

 

2. 작은 크기

Redux, Recoil 보다 훨씬 작은 사이즈를 가져 가볍고 빠르다.

 

3. 중복 렌더링 최소화

ZUSTAND는 상태 업데이트 시 중복 렌더링을 최소화하여 성능 최적화에 유리,

상태가 변경되더라도 관련된 컴포넌트만 업데이트 한다.

 

 

하루가 멀다하고 바뀌는 프론트엔드 기술..

핫한 것만 따라갑시다이-

 

저는 이번에 포폴 만들 때 요걸 사용해볼까 생각 중

 

사용법은 제가 실제로 사용해보고 요기다가 업데이트 할게요