[기술면접] React 부분 7

Boyoung Lee·2025년 1월 20일

기술면접

목록 보기

40/49

<목차>

useQuery, useMutation
useInfiniteQuery

19. useQuery, useMutation

useQuery

비동기 데이터를 불러오고 캐싱하는데 사용
지정된 키에 대해 캐시에서 데이터를 조회
지정된 키가 없는 경우 서버에서 데이터 불러오기 => 데이터가 성공적으로 불러와지면 자동 캐시 저장

import { useQuery } from '@tanstack/react-query';

const { data, error, isLoading, isError } = useQuery(['uniqueKey'], fetchFunction);

function fetchFunction() {
  return fetch('https://api.example.com/data').then(res => res.json());
}

uniqueKey : 쿼리 식별자로 사용, 캐싱과 업데이트 추적을 위해 사용
fetchFunction : 데이터를 불러오는 함수, 주로 API 호출 구현에 사용
반환값 :
- data : 불러온 데이터
- error : 요청 중 발생한 오류
- isLoading : 요청이 로딩 중인지 여부
- isError : 요청이 오류를 반환했는지의 여부

useMutation

데이터를 생성, 업데이트, 삭제하는 등의 변경을 서버에 요청할 때 사용
성공, 오류, 로딩 상태 관리를 쉽게할 수 있음

import { useMutation } from '@tanstack/react-query';

const mutation = useMutation(newData => {
  return fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newData),
  });
});

function handleSubmit(data) {
  mutation.mutate(data, {
    onSuccess: () => {
      console.log('Data added successfully!');
    },
    onError: (error) => {
      console.error('Error adding data:', error);
    },
  });
}

newData : 서버에 보낼 새로운 데이터
mutate : 뮤테이션을 트리거하는 메소드
onSuccess, onError : 콜백 함수로, 뮤테이션의 성공 또는 실패 후 실행

Q. Tanstack Query의 useQuery, useMutation을 사용하여 데이터를 관리하고 캐싱하는 방법을 이해합니다.

20. useInfiniteQuery

무한 스크롤 기능을 구현을 도와주는 훅
페이지네이션된 데이터를 불러올 때 페이지 별로 데이터를 요청
이전 페이지들의 데이터와 새로운 페이지의 데이터를 자동으로 합치는 기능

useInfiniteQuery 기본 사용법

무한 스크롤을 위한 API 함수 정의
페이지 인덱스를 인자로 받아 해당 페이지의 데이터 반환

import { useInfiniteQuery } from '@tanstack/react-query';

function fetchProjects(page = 0) {
  return fetch(`https://api.example.com/projects?page=${page}`)
    .then(res => res.json());
}

const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useInfiniteQuery(
  ['projects'],
  ({ pageParam = 0 }) => fetchProjects(pageParam),
  {
    getNextPageParam: (lastPage, allPages) => {
      // 다음 페이지 인덱스를 반환하거나, 더 이상 페이지가 없다면 undefined를 반환
      return lastPage.nextPage ?? undefined;
    }
  }
);

fetchProjects : 서버에서 데이터를 불러오는 함수, 페이지 번호를 인자로 받음
useInfiniteQuery : 무한 쿼리를 설정
- 첫 번째 인자 : 캐시 키
- 두 번째 인자 : 데이터를 불러올 때 실행될 함수
- pageParam : 현재 페이지 번호
- getNextPageParam : 마지막으로 불러온 페이지의 데이터에서 다음 페이지의 파라미터를 결정하는 함수 => 다음에 불러올 페이지 번호를 결정
fetchNextPage : 다음 페이지의 데이터를 불러오는 함수
hasNextPage : 더 불러올 페이지가 있는지 여부 표시
isFetchingNextPage : 다음 페이지의 데이터를 불러오고 있는지의 여부 표시
status : 쿼리의 상태(로딩,에러 등)을 표시

스크롤 이벤트 처리

스크롤 이벤트를 이용해 사용자가 페이지 하단에 도달했을 때 자동으로 다음 페이지를 불러오기

import { useRef } from 'react';

function InfiniteProjects() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(...);
  const loadMoreRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasNextPage) {
          fetchNextPage();
        }
      },
      { threshold: 1.0 }
    );

    if (loadMoreRef.current) {
      observer.observe(loadMoreRef.current);
    }

    return () => {
      if (loadMoreRef.current) {
        observer.unobserve(loadMoreRef.current);
      }
    };
  }, [loadMoreRef.current, hasNextPage]);

  return (
    <div>
      {data.pages.map((page, i) => (
        <React.Fragment key={i}>
          {page.results.map(project => <div key={project.id}>{project.name}</div>)}
        </React.Fragment>
      ))}
      <div ref={loadMoreRef} style={{ height: '20px' }} />
      {isFetchingNextPage && <p>Loading more...</p>}
    </div>
  );
}