React Query (TanStack Query)
useQuery, useMutation, invalidation, cache, refetch, loading/error states, optimistic updates, query keys, 페이지네이션
20 면접 질문·
Mid-Level
1React Query에서 useQuery의 주요 역할은 무엇인가요?
1
React Query에서 useQuery의 주요 역할은 무엇인가요?
답변
useQuery는 API나 데이터 소스에서 읽기 전용 데이터를 가져오기 위한 기본 hook입니다. cache, 로딩 상태, 에러, refetch 전략을 자동으로 관리합니다. useEffect와 fetch의 조합과 달리, useQuery는 지능적인 cache 시스템을 통해 중복 요청을 방지하여 성능을 최적화합니다.
2API에 POST mutation을 수행하려면 어떤 hook을 사용해야 하나요?
2
API에 POST mutation을 수행하려면 어떤 hook을 사용해야 하나요?
답변
useMutation은 POST, PUT, PATCH 또는 DELETE와 같은 쓰기 작업을 위한 전용 hook입니다. mutation 생명주기를 관리하기 위해 onSuccess, onError, onMutate 콜백을 제공합니다. 읽기를 위한 useQuery와 달리, useMutation은 요청을 자동으로 트리거하지 않으며 mutate 함수를 명시적으로 호출해야 합니다.
3React Query에서 query key의 목적은 무엇인가요?
3
React Query에서 query key의 목적은 무엇인가요?
답변
query key는 React Query가 cache와 쿼리 간 의존성을 관리할 수 있게 하는 고유 식별자입니다. 특정 쿼리를 식별하고, invalidate하고, refetch하는 데 사용됩니다. query key는 단순한 string이거나 동적 파라미터를 포함하는 배열일 수 있습니다. query key를 변경하면 자동으로 새 fetch가 트리거되어 의존성을 선언적으로 관리할 수 있습니다.
4
useQuery 설정에서 staleTime은 무엇을 나타내나요?
5
useQuery가 로딩 중임을 나타내는 프로퍼티는 무엇인가요?
+17 면접 질문
기타 React / Next.js 면접 주제
JavaScript 기초
Junior
25개 질문React 기초
Junior
20개 질문React Hooks
Junior
22개 질문컴포넌트 라이프사이클
Junior
18개 질문React Router
Junior
20개 질문Context를 활용한 상태 관리
Junior
18개 질문폼과 Controlled Components
Mid-Level
20개 질문데이터 가져오기 및 API
Mid-Level
20개 질문Styling & CSS-in-JS
Mid-Level
18개 질문Next.js 기초
Mid-Level
25개 질문TypeScript와 React
Mid-Level
20개 질문Next.js 데이터 페칭
Mid-Level
24개 질문Next.js Server Actions
Mid-Level
20개 질문Next.js 라우팅 및 내비게이션
Mid-Level
22개 질문Next.js API Routes
Mid-Level
20개 질문Next.js Metadata & SEO
Mid-Level
18개 질문Next.js Middleware 및 Auth
Mid-Level
22개 질문React 테스트
Mid-Level
20개 질문Zustand State Management
Mid-Level
18개 질문React 성능 최적화
Senior
22개 질문Error Boundaries & 에러 핸들링
Senior
18개 질문Advanced React Patterns
Senior
20개 질문Next.js 고급 기능
Senior
24개 질문Next.js 배포 및 프로덕션
Senior
20개 질문아키텍처 & 디자인 패턴
Senior
22개 질문React Server Components
Senior
26개 질문Next.js 국제화
Senior
20개 질문React 보안 & 모범 사례
Senior
22개 질문