useQuery 데이터 사용법 질문

맛집 지도앱 만들기 (React Native + NestJS)

[8-6] 범례 표시하기

작성

안녕하세요 문득 궁금해서 질문드립니다.
리액트쿼리 공식문서를보면

const { isPending, error, data } = useQuery({     queryKey: ['repoData'],     queryFn: () =>       fetch('https://api.github.com/repos/TanStack/query').then((res) =>         res.json(),       ),   })    
if (isPending) return 'Loading...'    
if (error) return 'An error has occurred: ' + error.message

이렇게 항상 값이 있다는 가정하에 데이터를 사용하게 하는데

MapHomeScreen이나 MapLegend 등에선

const {categories} = getProfileQuery.data || {};

이런식으로 하시더라구요 실제로 저는 MapHomeScreen 스크린에서 마커가 클릭후에 나타나는 현상이 있어서

const {data: markers = [], isPending, error} = useGetMarkers();
if (isPending || error) return <></>;

이렇게 데이터가 로딩또는 에러가 아닐때 다음 구문으로 넘어가게 하니 마커가 잘 나타났습니다

제가 궁금한건

if (isPending || error) return <></>;

처리를 해줄때와 안해줘도 될 때가 따로 있는것인지 그게 궁금합니다~

react-native typescript nestjs react-query zustand

답변 2

Kyo

지식공유자

마커가 클릭후에 나타난다는게 어떤현상인가요? 일반적으로 말씀하신것처럼 처리해주시면 될것같습니다.

최수렬

질문자

기존에 추가한 커스텀 마커가 화면에 나타나지 않다가 화면을 클릭한 후에 나오는 현상이 있었습니다.
그리고 범례표시 화면에서도 같은 현상이 있습니다 클릭시 백그라운드에 있는 마커가 나타나지 않지만 확인 버튼을 누르면 제대로 표시되는 그런현상이 있습니다 MapView 컴포넌트를 사용하지 않으면 이런 현상이 없는데 MapView 컴포넌트의 차일드로 들어간 커스텀마커만 그럽니다 ㅠ 버전 문제인가 싶어서 같은 0.72.6 버전으로도 해볼려고 합니다 현재는 0.76 버전으로 앱을 완성하였습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

최수렬님, useQuery 훅을 사용할 때 데이터 fetching 상태를 고려하는 것은 매우 중요합니다. useQuery 훅을 사용할 때 isPending, error, data 등 상태를 확인하는 방법에 관해 질문 주셨네요.

데이터 상태 확인의 필요성
- useQuery를 사용할 때 데이터는 비동기적으로 불러와집니다. 따라서 데이터가 아직 로딩 중(pending)일 수 있으며, 네트워크 오류(error)도 발생할 수 있습니다.
- isPending 상태를 활용해 아직 데이터가 로딩 중이라면 사용자에게 로딩 상태를 보여주거나, 아무 것도 아닌 상태로 표시할 필요가 있습니다.
- 오류가 발생했을 때 error 상태를 활용하여 사용자가 오류 메시지를 보거나, 오류에 대한 처리를 할 수 있도록 합니다.
상태 확인의 실제 사용 예시
- "if (isPending || error) return <></>;" 같은 구문을 작성하여 로딩 중일 때나 오류가 있을 때 특정한 UI를 렌더링하지 않도록 처리합니다. 이는 사용자 경험을 개선할 수 있습니다.
- 반대로, 로딩 상태나 오류를 고려하지 않고 바로 data를 사용하게 되면, data가 아직 유효하지 않을 때 예상치 않은 오류가 발생할 수 있습니다.
상태 처리가 필요 없는 경우
- 데이터 fetching이 없는 스크린이나 컴포넌트, 혹은 데이터가 이미 동기적으로 준비되어 있는 경우 isPending이나 error 상태를 고려하지 않아도 될 수 있습니다.

따라서, useQuery를 사용할 때는 항상 로딩 상태와 오류 상태를 처리해주는 것이 좋습니다. 특히 사용자 경험을 고려한다면, 데이터를 사용할 준비가 완료되기 전까지 사용자가 불완전한 UI를 보지 않도록 해야 합니다.

Image Source & URL:
- React Query Docs - useQuery

인프런 커뮤니티 질문&답변

useQuery 데이터 사용법 질문