최종 프로젝트에서 zustand부분의 코드를 한번 더 정리하기 위해서 zustand 코드를 어떤 패턴으로 코딩하는 것이 좋은지에 대해서 공식문서를 쓱 한번 봤다.

zustand는 굉장히 편리하고 간단한 상태 관리 라이브러리로, redux에 영감을 받아서 만들어졌다고 한다. 그렇기 때문에 redux와 굉장히 비슷한 형태로 구현돼있다.

일단 대략적인 사용방법에 대해서는 알고 있었으니 이번에는 몰랐던 내용들에 대해서 정리를 하려고 한다.

랜더링

zustand에서 전역 상태를 가지고 와서 사용을 하게 되면 코드 상에서 아래처럼 쓰는 일이 많았다.
이렇게 사용을 해도 별다른 불편한 점들을 느끼지 못했고 잘 동작했기 때문에 상관없다고 생각을 했었다.

const {value,action} = useZustand();

그렇지만 이렇게 사용하는 것은 랜더링에 있어서 최적화가 되지 않는다는 것이 문제였다.

아래의 코드를 통해서 랜더링이 어떻게 되는지를 알 수 있었는데

function App() {
	return (
      <>
    	<A/>
	    <B/>
      </>
    )
}
function A() {
  const { counter, plusCount } = useCounter((state) => ({
    counter: state.counter,
    plusCount: state.plusCount,
  }));
  console.log("render a");
  return (
    <>
      <p>currentCounter: {counter}</p>
      <button onClick={() => plusCount()}> plus counter</button>
    </>
  );
}
function B() {
  const doubleCounter = useCounter((state) => state.doubleCounter);
  const plusDoubleCounter = useCounter((state) => state.plusdoubleCounter);
  console.log("render b");
  return (
    <>
      <p>current double Counter : {doubleCounter}</p>
      <button onClick={() => plusDoubleCounter()}>plus double couter</button>
    </>
  );
}


const useCounter = create()(set => ({
	counter: 0,
	doubleCounter: 0,
	plusCount: () =>
    	set((state) => ({
	      counter: state.counter + 1,
	    })),
	plusdoubleCounter: () =>
		set((state) => ({ doubleCounter: state.doubleCounter + 1 })),
}))

이 상태에서 B컴포넌트의 plus dobule counter를 눌르게 된다면 A가 랜더링이 된다.
이는 원치 않은 상태이다. 반대로
A의 컴포넌트를 아래처럼 변경을 한다면

function A() {
  const counter = useCounter(state => state.counter);
  const plusCounter = useCounter(state => state.plusCounter);
  // const {counter,plusCounter} = useCounter();
 ...
}

주석처리 되지 않은 상태로 하니 랜더링이 일어나지 않았다. 주석 처리를 한 부분을 실행하니 랜더링이 일어났다. 무작정 그냥 상태가 바뀔때만 랜더링을 하는지 알았는데 정확하게 특정 부분이 바뀔때만 실행을 하고 싶으면 셀렉터를 설정해야 한다는 것을 배웠다.

이번 최종 프로젝트에서 그냥 무작정 쓴 상태값들이 많은데 이를 셀렉터를 바꾸게 된다면 좀 더 쾌적하게 만들 수 있을 것 같다.