React - useQuery

 

 

useQuery는 React Query에서 데이터를 서버에서 비동기적으로 가져올 때 사용하는 가장 기본적인 훅입니다.

const { data, isLoading, error } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
})

주요 속성

• queryKey:
  • 해당 쿼리의 고유 키입니다. 캐싱, 리페칭 등에 활용됨
  • 배열 형태로 작성하며, 서버에 요청을 보낼 조건을 포함할 수 있음
• queryFn:
  • 실제 서버에서 데이터를 가져오는 함수 (예: axios.get(...))
  • 비동기 함수 형태로 작성됨
• data:
  • 쿼리의 결과 데이터
• isLoading:
  • 데이터를 가져오는 중인지 여부 (boolean)
• error:
  • 에러 발생 시 객체 반환
• refetch:
  • 수동으로 다시 조회할 때 사용

---

예시: 공통코드 목록 가져오기

const { data, isLoading } = useQuery({
  queryKey: ["commCodeList", groupId],
  queryFn: () => CommCodeEndpoint.listByGroup(groupId),
  initialData: [],
})

• groupId가 바뀌면 자동으로 재조회됨
• initialData를 설정하면 로딩 전에 기본값 세팅 가능

---

✅ 언제 사용하나요?

• 서버 데이터를 가져올 때 (GET)
• 컴포넌트 마운트 시 자동 조회하고 싶을 때
• 캐시된 데이터를 활용하고 싶을 때
• 수동 리페치 등 편의 기능을 활용하고 싶을 때