[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교

안녕하세요. 강사님! 학습 중에 궁금한 점이 생겼는데, 제가 이해하고 있는 내용이 맞는지 궁금해 질문 드립니다!

const obj1 = { a: 1 };

const obj2 = { a: 1 };

const obj3 = obj1;

1. console.log(obj1 === obj2); // false

2. console.log(obj1 === obj3); // true

자바스크립트에서 객체나 배열을 비교할 때 기본적으로 참조를 비교하는 것으로 알고 있습니다.

즉, 1번에서 두 객체가 같은 값을 가지고 있으나 메모리 주소가 달라 false를 출력하고,

2번에선 같은 메모리 주소를 참조해 true를 출력하는 것으로 알고 있습니다

여기서부터 제가 궁금했던 내용입니다!

캐시된 filteredPosts를 사용해 렌더링하는 경우를 가정했을 때 :

const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag]);

filteredPosts는 useMemo를 통해 filterPosts 함수로 생성된 배열을 클로저 공간에 넣어두고,

posts와 tag가 변경되지 않는다면 항상 똑같은 값을 FilteredPosts로 전달 =>

<FilteredPosts posts={filteredPosts} />

const FilteredPosts = MyReact.memo(({ posts }) => {
 ...
}
// 

FilteredPosts는 캐시된 filteredPosts를 memo 함수로 전달 =>

function memo(TargetComponent) {
  return (nextProps) => {
 ...
    const [prevValue, prevProps] = TargetComponenet.memorizedState;

    if (prevProps === nextProps) {
      return prevValue;
    }

 ...
 }
}

그럼 여기 전달된 nextProps(캐시된 filteredProps)는 당연히 같은 메모리를 참조하니 깊은 비교 없이 참조 비교만으로도 비교가 가능하지 않나? 싶었습니다.

filteredPosts는 결과적으로 useMemo로 캐시되어있고, 새로 생성된 배열이 아니니 메모리 주소가 동일해 prevValue가 리턴되지 않을까? 했는데 아니더라구요..

useMemo를 통해 filteredPosts 배열의 참조는 동일하게 유지되고 있는건 맞는데,

{ posts: filteredPosts }

이렇게 FilteredPosts 컴포넌트에 전달되는 props 객체가 매번 새로운 객체로 생성돼서 그런건가? 싶은데 이게 맞는지 궁금해서 질문 드립니다..

// <FilteredPosts posts={filteredPosts} />
React.createElement(FilteredPosts, {posts: filterdPosts} )