React Query Render Optimizations

주의 (disclaimer)

렌더링 최적화는 모든 앱에서 고급 개념입니다. React Query는 이미 매우 우수한 최적화와 기본값을 기본으로 제공하고 있으며, 대부분의 경우 추가 최적화가 필요하지 않습니다. “불필요한 리렌더링”은 많은 사람들이 집중하는 경향이 있는 주제이기 때문에 이 주제를 다루기로 결정했습니다. 하지만 다시 한 번 말씀드리고 싶은 것은 대부분의 앱에서 렌더링 최적화는 생각만큼 중요하지 않을 수 있다는 점입니다. 리렌더링은 좋은 일입니다. 앱을 최신 상태로 유지할 수 있기 때문입니다. 저는 매일, 하루 종일 ‘있어야 할 렌더링이 누락되는 것’보다는 ‘불필요한 재렌더링’을 택할 것입니다. 이 주제에 대하 자세한 내용은 이 글을 읽어보세요:

#2: React Query 데이터 변환에서 select 옵션을 설명할 때 이미 렌더링 최적화에 대해 꽤 많이 썼습니다. 하지만 “데이터에 아무 변화가 없는데 왜 React Query가 컴포넌트를 두 번 다시 렌더링하는가?”는 아마도 제가 가장 대답하고 싶었던 질문이었을 것입니다.(”v2 문서는 어디서 볼 수 있나요?”를 제외하고 😅) 그래서 제가 자세히 설명해 보겠습니다.

isFetching 전환

지난 예제에서 이 컴포넌트는