[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.

안녕하세요 선생님 every 배열을 비교하는 방법이 궁금해서 로그를 찍어보았습니다.

// export default App;
import MyReact from "./lib/MyReact";
import React from "react";
const Board = ({ posts, tag }) => {
  MyReact.resetCursor();

  const [darkTheme, setDarkTheme] = React.useState(false);
  const filterPosts = () => {
    console.log("filterPosts");
    return posts.filter((post) => (tag ? post.tag === tag : true));
  };

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

  console.log("Board rendered");

  return (
    <>
      <div>
        <button onClick={() => setDarkTheme(!darkTheme)}>Theme Change</button>
        <span>{darkTheme ? "dark" : "light"}</span>
      </div>
      <FilteredPosts value={filteredPosts}></FilteredPosts>
    </>
  );
};

const FilteredPosts = MyReact.memo(({ value }) => {
  console.log("FilteredPosts rendered")
  return (
    <ul>
      {value.map(({ id, content, tag }) => {
        return (
          <li key={id}>
            {content} <span>#{tag}</span>
          </li>
        );
      })}
    </ul>
  );
});

export default () => {
  const [tag, setTag] = React.useState("");
  return (
    <>
      <button onClick={() => setTag("")}>ALL</button>
      <button onClick={() => setTag("tag1")}>Tag1</button>
      <button onClick={() => setTag("tag2")}>Tag2</button>
      <Board
        posts={[
          { id: "id1", content: "content1", tag: "tag1" },
          { id: "id2", content: "content2", tag: "tag1" },
          { id: "id3", content: "content3", tag: "tag2" },
        ]}
        tag={tag}
      />
    </>
  );
};

  function useMemo(nextCreate, deps) {
    console.log("deps = ", deps);
    if (!memorizedStates[cursor]) {
      const nextValue = nextCreate();
      memorizedStates[cursor] = [nextValue, deps];
      cursor = cursor + 1;
      return nextValue;
    }
    const nextDeps = deps;
    const [prevValue, prevDeps] = memorizedStates[cursor];
    console.log("prevDeps => ", prevDeps);
    console.log("nextDeps => ", nextDeps);
    if (
      prevDeps.every((prev, index) => {
        console.log(
          "comparing ->  ",
          prev,
          nextDeps[index],
          prev === nextDeps[index],
          index
        );
        return prev === nextDeps[index];
      })
    ) {
      console.log("it is same");
      cursor = cursor + 1;
      return prevValue;
    }
    console.log("it is not same");

    const nextValue = nextCreate();
    memorizedStates[cursor] = [nextValue, deps];
    cursor = cursor + 1;
    return nextValue;
  }

여기서 궁금한 점은

1번째 빨간 paragraph는 theme change를 눌러서 변경이 없는 경우입니다.

comparing => 로그를 확인하면

every가 2개를 비교하는데 첫번째는 array(posts)를 비교하고

두번째는 tag를 비교하는것을 확인 할 수 있습니다.

2번째 빨간 paragraph는 Tag1 버튼을 누른 경우입니다.

이때 저는 첫번째 비교는 true이고 두번째 비교에서 빈문자열 vs tag1이니 여기서 false가 나길 기대했지만 결과는 그렇지 않았고 첫번째 array(posts) 비교에서 false가 나왔습니다.

3번째 빨간 paragraph는 다시 theme change를 눌렀고 이는 정상적으로 array(posts) , tag1 비교를 수행한것을 확인할 수 있습니다.

왜 이런것인가요?