zustand 중심의 상태 관리에 관한 이야기

https://www.youtube.com/watch?v=nkXIpGjVxWU

보다가 늘 말로만 듣던 Flux 패턴이라는 게 나왔다.

https://velog.io/@andy0011/Flux-패턴이란

react query의 쿼리 키를 만들 때 변수 작명 같아서 고민일 때가 많은데 그럴 때 쿼리 키 생성 라이브러리 사용 가능

https://tanstack.com/query/v4/docs/framework/react/community/lukemorales-query-key-factory

회사에서 zustand를 사용하고 있는데 써본지 오래되어서 공식 문서를 읽고 다시 한번 따라해보면서 간단히 메모한다.

zustand

create 함수를 사용해서 상태를 생성하고 set 함수를 사용해서 상태를 변경하는 함수를 정의한다. set에는 상태를 업데이트하는 콜백을 넘긴다.

import { create } from "zustand";

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

이때 객체의 프로퍼티가 많다면 {...state, bears: state.bears + 1 }와 같이 기존 상태를 복사해서 새로운 상태를 반환하는 방식으로 불변성을 유지하면서 상태를 업데이트해야 하지만, 이건 워낙 흔한 패턴이므로 set 이 자동으로 상태를 병합해주기 때문에 굳이 복사할 필요는 없다.

이런 자동 병합을 끌 수도 있는데 그러면 set함수의 2번째 인자인 replace를 true로 설정하면 된다. 이 경우 상태가 완전히 교체된다.

set((state) => newState, true)

단 이런 자동 병합은 얕은 복사로 이루어진다(it will be shallowly merged with the existing state in the store.). 따라서 중첩 객체 업데이트 시 ... 연산자를 사용해서 상태를 복사하여 불변 객체를 보장해줘야 한다. 하지만 깊이 중첩된 객체의 경우 Immer와 같은 대안을 고려할 수 있다. 깊은 중첩 객체를 복사하는 건 실수의 여지도 많기 때문이다.

상태를 가져와 사용할 땐 create에서 리턴하는 use~Store 훅을 사용한다. state에서 필요한 속성을 선택적으로 가져온다.

import { useStore } from "./store";

function App() {
  const bears = useStore((state) => state.bears);
  const increasePopulation = useStore((state) => state.increasePopulation);

  // ...
}

이런 식으로 선택적으로 속성을 가져오는 걸 셀렉터를 이용한다고 한다. 그런데 이런 콜백을 매번 쓰는 게 귀찮다면 자동으로 생성하는 함수를 만들어줄 수 있다고 한다. Auto Generating Selectors

combine 함수를 사용해서 initial state와 업데이트 함수를 한번에 정의할 수도 있다. 이러면 state creator 함수가 리턴되는데 타입 추론도 더 잘된다고 함.

https://zustand.docs.pmnd.rs/middlewares/combine

combine<T, U>(initialState: T, additionalStateCreatorFn: StateCreator<T, [], [], U>): StateCreator<Omit<T, keyof U> & U, [], []>

보통 combine(초기상태, set을 이용해서 상태를 업데이트하는 함수를 담은 객체) 형태로 사용한다.

Flux inspired practice

상태 업데이트 함수는 변경하는 데이터와 같은 store에 두는 게 추천된다.

const useStore = create((set) => ({
  x:0,
  y:0,
  setX: (x: number) => set({ x }),
  setY: (y: number) => set({ y }),
}));

store 훅의 setState 메서드를 이용해서 외부에서 state를 업데이트하는 것도 가능은 하다. Practice with no store actions

위의 훅이라면 이런 식으로 사용할 수 있다. setX를 선언하는 대신 이렇게 직접 setState를 사용해서 상태를 업데이트하는 함수를 만드는 것.

const increaseX = useStore.setState((state) => ({ x: state.x + 1 }));

create vs createStore

그리고 create 함수는 상태를 사용할 수 있게 하는 커스텀 훅을 리턴한다. createStore는 상태 저장소 그 자체를 리턴한다. 즉 훅으로 사용할 게 아닐 경우(조건문, context API 등에서 사용하고 싶다면) createStore를 써야 한다.

https://tuffstuff9.hashnode.dev/zustand-create-vs-createstore