reateWithEqualityFn

 

🎯 createWithEqualityFn이란 무엇인가요?

**createWithEqualityFn**은 Zustand의 상태(store)를 만들 때, 특정 값이 바뀌었는지 확인하는 방식을 직접 정할 수 있도록 해주는 함수예요.

간단하게 말해:

• Zustand의 상태를 사용하다 보면 값이 바뀌었는지 확인하고 그에 따라 화면을 업데이트해요.
• createWithEqualityFn을 사용하면 상태가 변경되었는지 비교하는 **기준(함수)**을 여러분이 직접 정할 수 있어요.

📦 상태를 비교하는 이유

왜 값을 비교할까요? 🤔

• React에서 상태가 바뀌었을 때만 화면을 다시 렌더링해요.
• 그런데 상태를 단순히 **"이전 값과 새 값이 다르냐"**만 확인하면, 불필요한 렌더링이 생길 수 있어요.

 

🧩 기본 Zustand 동작

기본적으로 Zustand는 **"얕은 비교(Shallow Equality)"**를 사용해요.
즉, 상태의 값이 달라졌는지 겉핥기식으로만 비교하죠.

예를 들어 볼까요?

const state1 = { count: 1 };
const state2 = { count: 1 };

console.log(state1 === state2); // false (객체는 참조값이 다르기 때문에 같지 않다고 판단)

겉으로 보기에는 같은 값이지만, 두 객체는 참조값이 달라서 다르다고 판단해요.
이런 상황에서 createWithEqualityFn을 사용하면 어떻게 비교할지를 정할 수 있어요.

 

🛠️ createWithEqualityFn 기본 사용법

createWithEqualityFn을 사용하면 상태의 비교 기준을 우리가 정할 수 있어요!
직접 예제를 보면서 이해해 볼게요.

 

1. Zustand 스토어 만들기

import { createWithEqualityFn } from "zustand/traditional";

const useStore = createWithEqualityFn(
  (set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }),
  Object.is // 비교 기준을 Object.is로 설정
);

 

🔍 코드 설명

1. createWithEqualityFn
   • Zustand의 상태(store)를 만들 때, 두 번째 인자로 비교 함수를 전달해요.
2. Object.is
   • JavaScript의 기본 비교 함수로, 값과 참조를 엄격하게 비교해요.
   • 예를 들어 1 === 1은 true이고, {} === {}는 false입니다.
3. 상태 비교 기준
   • 여기서는 **Object.is**를 사용해서 상태가 정말 바뀌었는지를 확인하고, 바뀌었을 때만 화면을 업데이트해요.

 

2. 상태 비교 기준을 커스터마이징하기

비교 기준을 직접 정의할 수도 있어요. 예를 들어 **깊은 비교(Deep Equality)**를 적용하고 싶다면 이렇게 만들 수 있어요.

import { createWithEqualityFn } from "zustand/traditional";
import isEqual from "lodash.isequal"; // lodash를 사용해서 깊은 비교하기

const useStore = createWithEqualityFn(
  (set) => ({
    user: { name: "Alice", age: 25 },
    updateUser: (newUser) => set({ user: newUser }),
  }),
  isEqual // 깊은 비교 기준을 설정
);

 

🧩 왜 이런 기능이 필요할까요?

불필요한 리렌더링을 막기 위해서예요!

• 상태가 바뀐 것처럼 보이지만 실제 값은 같을 때, 화면이 괜히 다시 그려질 수 있어요.
• createWithEqualityFn을 사용하면 상태 비교를 더 정교하게 해서 성능을 최적화할 수 있어요.

 

🍕 비유로 이해하기

여러분이 피자를 주문했다고 생각해 봐요. 🍕

• 기본 Zustand: **"주문번호만 비교"**해서 피자가 다른 주문인지 판단해요. (얕은 비교)
• createWithEqualityFn: **"피자 속 재료까지 비교"**해서 진짜 다른 피자인지 확인해요. (깊은 비교 가능)

 

🚀 createWithEqualityFn 사용 시 장점

1. 불필요한 렌더링 방지
   • 상태가 정말 바뀌었을 때만 화면을 업데이트하니까 성능이 좋아져요.
2. 비교 기준을 커스터마이징
   • 단순히 겉으로만 비교하는 게 아니라, 깊은 비교나 복잡한 기준을 직접 설정할 수 있어요.
3. 더 정교한 상태 관리
   • 상황에 맞게 비교 기준을 선택하면 상태 관리가 더 세밀해져요.

 

🌟 한 줄 요약

createWithEqualityFn은 Zustand 상태 관리에서 값이 바뀌었는지 확인하는 기준을 직접 설정해주는 도구예요.
불필요한 렌더링을 줄이고 성능을 최적화할 수 있습니다! 🚀