프로그램 최적화 - 불필요한 반복문 실행 줄이기

데이터를 불러오는 과정에서 state가 변할 때 마다 필요하지 않은 반복문이 실행되었다.

 

const { data, isLoading, isError } = useQuery('CollectionData', getCollection);
const collectionData = data?.find(
  (item: { docId: string | undefined }) =>
    item.docId === authService.currentUser?.uid
)?.collection;

console.log('클라이언트 단계에서 반복문 실행');

원인

클라이언트 단계에서 반복문을 실행하여서이다. 컴포넌트 첫 렌더링 시 반복문이 실행되고 state가 변할때 마다 반복문이 실행되어 불필요한 실행이 반복되었다.

 

해결방법

useQuery의 select옵션을 사용하여 특정한(필요한) 데이터만 가져온다.

select옵션을 사용하여 클라이언트 단계가 아닌 쿼리 단계에서 데이터를 가져오며 반복문을 실행한다.

 

결과

const {
  data: collectionData,
  isLoading,
  isError,
} = useQuery('CollectionData', getCollection, {
  select: (data) =>
    data?.find(
      (item: { docId: string | undefined }) =>
        item.docId === authService.currentUser?.uid
    )?.collection,
  onSuccess: () => {
    console.log('쿼리 단계에서 반복문 실행');
  },
});

state가 변할 때 반복문이 실행되지 않고, state가 변할때 마다 일어나는 불필요한 반복문 실행을 줄일 수 있었다.