TanStackQuery (16) - 렌더링 최적화

 

React Query는 구성 요소가 실제로 필요할 때만 다시 렌더링되도록 다음의 방법으로 수행된다

 

구조적 공유

React Query는 구조적 공유란 기술을 사용하여 간읗나 많은 참조가 다시렌더링 되는 동안 그대로 유지되도록 한다

 

일반적으로 네트워크를 통해 데이터를 가져오면 응답을 JSON 구문 분석하여 완전히 새로운 참조를 받는다.

그러나 React Query는 데이터에서 아무것도 변경되지 않으면 원래 참조를 유지한다.

하위 집합이 변경된 경우 React Query는 변경되지 않은 부분을 유지하고 변경된 부분만 대체한다.

 

참조적 통일성

useQuery, useInfiniteQuery, useMutation에서 반환된 최상위 객체와 useQueries에서 반환된 Array는 참조적으로 안정적이지 않다.

왜냐하면 모든 렌더링에서 새 참조가 되기 때문이다.

그러나 이러한 hook에서 반환된 data 속성은 안정적이다.

 

추적된 속성

React Query는 useQuery에서 반환된 속성 중 하나가 실제로 사용된 경우에만 다시 렌더링을 트리거한다.

이는 사용자 지정 get, set을 사용하여 수행한다.

 // get, set 예시
 Object.defineProperty(this, "temperature", {
    get() {
      console.log("get!");
      return temperature;
    },
    set(value) {
      temperature = value;
      archive.push({ val: temperature });
    },
  });

이를 통해 불필요한 리렌더링을 피할 수 있다.

 

*사용자 지정 get,set은 구조 분해 하거나 직접 속성에 액세스하여 호출하는데

객체 나머지 구조 분해를 사용하는 경우 비활성화된다.

 

Select

select 옵션을 사용하여 구성 요소가 구독해야 하는 데이터의 하위 집합을 선택할 수 있다.

이는 고도로 최적화된 데이터 변환이나 불필요한 리렌더링을 방지하는데 유용하다.

 

export const usetodos = (select) => {
	return useQuery({
    	queryKey: ['todos'],
        queryFn: fetchTodos,
        select,
    })
}

export const useTodoCount = () => {
	return useTodos((data) => data.length)
}

 

위 코드에서 useTodoCount hook을 사용하는 구성 요소는 todos의 길이가 변경되는 경우에만 다시 렌더링된다

예를 들어 todo의 이름이 변경되는 경우에는 리렌더링하지 않는다.