패스트캠퍼스 챌린지 16일차 (Zustand)

22.2.8 (화) +16days

Zustand

small / fast / scalable bearbones state-management

simplified flux principles

comfy api based on hooks

isn’t boilerplatey or opinionated

 

설치

npm install zustand

 

기본 사용법

import React from 'react';
import create from 'zustand';

const useStore = create((set) => ({
  fontSize: 14,
  increaseFontSize: () => set((state) => ({ fontSize: state.fontSize + 1 })),
}));

export default function Text() {
  const fontSize = useStore((state) => state.fontSize);
  const increaseFontSize = useStore((state) => state.increaseFontSize);

  return (
    <>
      <p style={{ fontSize }}>This text will increase in size too.</p>
      <button onClick={increaseFontSize}>size up</button>
    </>
  );
}

Detects Changes

strict-equality (old === new) 가 default

shallow equality 는 import shallow from ‘zustand/shallow’

custom Equality

Memoizing Selectors

 

Overwriting state

https://github.com/pmndrs/zustand#overwriting-state

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

() ⇒ set(state ⇒ {}, true)

set의 두 번째 인자 default가 false true 면 state를 완전히 대체

 

Recipes

https://github.com/pmndrs/zustand#recipes

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

Todo Example

Recoil => Zustand 로 컨버팅 예제 진행

 

DevTools

Zustand는 devtools를 제공하지 않지만 Redux의 devtools를 사용할 수 있음.

import { devtools } from 'zustand/middleware'

// Usage with a plain action store, it will log actions as "setState"
const useStore = create(devtools(store))
// Usage with a redux store, it will log full action types
const useStore = create(devtools(redux(reducer, initialState)))

 

정리

No Provider ⇒ React와 완전 분리

create ⇒ useStore를 만들 수 있음 (자유도 높음)

compare 로직 ⇒ 커스텀 가능

memoizing selector ⇒ 메모이제이션 with useCallback

Overwrting state ⇒ set의 두 번째 변수

Selector ⇒ state를 토대로 계산하는 건 함수로

React와 관계 ⇒ 리액트 외부 혹은 바닐라에서도 동작

Devtools ⇒ Redux devtools 사용 가능

비동기 호출 ⇒ set 이전에 비동기가 일어나도 무관

기타 팁 ⇒ Redux-like / Reacting to changes

미들웨어 ⇒ Persist middleware

 

 

 

 

22.2.8 +16days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다