이 글에서는 Zustand의 소스 코드에서 Object.is() 메소드가 어떻게 사용되는지 살펴보겠습니다.

위 코드 조각은 바닐라.ts에서 선택되었습니다.

Object.is() 메소드는 setState에서 사용됩니다(나중에 이에 대한 추가 기사).

먼저 Object.is() 메소드가 무엇인지 이해해 봅시다.

Object.is()

Object.is() 정적 메서드는 두 값이 동일한 값인지 확인합니다.

아래 예는 MDN Docs에서 선택되었습니다.

    console.log(Object.is('1', 1));
    // Expected output: false

    console.log(Object.is(NaN, NaN));
    // Expected output: true

    console.log(Object.is(-0, 0));
    // Expected output: false

    const obj = {};
    console.log(Object.is(obj, {}));
    // Expected output: false

다음은 약간 복잡한 JSON 예입니다.

    const jsonObject1 = {
        name: "foo",
        age: 30
    };

    const jsonObject2 = {
        name: "bar",
        age: 30
    };

    console.log(Object.is(jsonObject1, jsonObject2)); // false

Object.is()가 false를 반환하는 이유는 무엇입니까?

jsonObject1과 jsonObject2의 내용이 동일하더라도 메모리에서는 서로 다른 개체입니다. JavaScript에서는 객체가 내용이 아닌 참조로 비교됩니다. 이 두 객체는 ​​서로 다른 메모리 위치에 저장되므로 Object.is()는 false를 반환합니다.

Object.is(nextState, 상태)

아래 Zustand의 코드 조각에서 Object.is() 메서드는 상태 업데이트를 진행하고 리스너에게 알리기 전에 nextState가 현재 상태와 실제로 다른지 여부를 확인하는 데 사용됩니다. 이 확인은 성능을 높이고 불필요한 상태 업데이트를 방지하는 데 중요합니다.

    const setState: StoreApi['setState'] = (partial, replace) => {
      // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
      // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
      const nextState =
        typeof partial === 'function'
          ? (partial as (state: TState) => TState)(state)
          : partial
      if (!Object.is(nextState, state)) {
        const previousState = state
        state =
          (replace ?? (typeof nextState !== 'object' || nextState === null))
            ? (nextState as TState)
            : Object.assign({}, state, nextState)
        listeners.forEach((listener) => listener(state, previousState))
      }
    }

아래 이미지는 Object.is()의 작동 모습을 보여줍니다.

위의 로그 문을 추가하기 위해 pnpm run build 명령을 사용하여 Zustand를 컴파일하고 dist를 example/demo/src에 복사했습니다. 해킹된 것처럼 보이지만 Zustand가 내부적으로 어떻게 작동하는지 실험하고 파악하고 있습니다.

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

inc를 호출하면 어떻게든 setState가 트리거됩니다. 다음 기사에서 어떻게 하는지 알아볼 것입니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

고급 아키텍처 개념을 연습하고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하여 코딩 기술을 향상하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

Next.js 프로젝트에 도움이 필요하십니까? [email protected]으로 문의하세요

저자 소개:

안녕하세요, 저는 램입니다. 저는 열정적인 소프트웨어 엔지니어/OSS Tinkerer입니다.

내 웹사이트를 확인하세요: https://www.ramunarasinga.com/

참고자료:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L71

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is