인프런 커뮤니티 질문&답변

안녕하세요 제로초님 강의를 듣던 중 궁금한 것이 있어서 여쭈어 봅니다.

강의에서는 데이터를 mutation으로 리페칭 후

if (queryClient.getQueryData(["posts", "recommends"])) {
        queryClient.setQueryData(
          ["posts", "recommends"],
          (prevData: { pages: Post[][] }) => {
            const shallow = {
              ...prevData,
              pages: [...prevData.pages],
            };
            shallow.pages[0] = [...shallow.pages[0]];
            shallow.pages[0].unshift(newPost);
            return shallow;
          }
        );
      }

이런 식으로 데이터를 업데이트 해주었는데, 이 부분을 아래와 같이

queryClient.invalidateQueries({ queryKey: ["posts", "recommends"] });

이런 식으로 업데이트를 하면 어떤 차이점이 있나요 ??

데이터 업데이트시 쿼리를 업데이트 하고 리페칭하는 동작은 같은 것 같은데, 강의에서와 같이 복잡한 데이터 구조를 복사 해가며 구현하는 이유가 궁금합니다.
성능상의 차이가 있는 것인가요 ??