react native useQuey 란?

useQuey란?

- 리액트 쿼리의 Hook

- 데이터의 캐시 키와 Promise를 반환하는 함수

- 데이터의 로딩, 결과, 오류 상태를 관리

 

예제 코드

import {useQuey} from 'react-quey';

function Sample() {
	const result =useQuery('sample', getSampleList);
    const { data, error, isLoading } = result;
}

 

useQuery의

첫 번째 인자에는 조회하고 싶은 데이터의 캐시 키를 넣습니다. 리액트 쿼리에서는 이 캐시 키를 사용하여 데이터를 캐싱합니다. 한번 데이터를 받아온 다음, 나중에 같은 요청을 해야 하는 상황에서 데이터가 이미 존재한다면 기존에 있던 데이터를 바로 보여줍니다. 그리고 설정에 따라 데이터를 새로 요청할 수도 있습니다.

 

두번째 인자에는 Promise를 반환하는 함수를 넣습니다. 그러면 이 컴포넌트가 렌더링될 때 해당 함수를 호ㅊ출하고, 이에 대한 상태가 관리 됩니다.

 

useQuey Hook을 사용하여 반환된 result 객체

satus : API의 요청 상태를 문자열로 나타낸다.

 - 'loading' : 아직 데이터를 받아오지 않았고, 현재 데이터를 요청 중

 - 'error' : 오류 발생

 - 'success' : 데이터 요청 성공

 - 'idle' : 비활성화된 상태(따로 설정해 비활성화한 경우)

 - isLoading : status === 'loading' 과 같다.

 - isError : status === 'error' 와 같습니다.

 - isSuccess : status === 'success' 와 같습니다.

 - isIdle : satus === 'idle' 과 같습니니다.

 - error : 오류가 발생했을 때 오류 정보를 지닙니다.

 - data : 요청 성공한 데이터를 가리킵니다.

 - isFetching : 데이터가 요청 중일 때 true가 됩니다(데이터가 이미 존재하는 상태에서 재요청할 때 isLoading은 false이지     만, isFetching은 true 입니다.)

 - refetch : 다시 요청을 시작하는 함수입니다.

 

import {useQuery} from 'react-query';
impory {Text, View} from 'react-native';

function Sample() {
	const result = useQuery('sample', getSampleList);
    const { data, error, isLoading } = result;
    
    if (isLoading) return <Text>로딩 중...</Text>
    if (error) return <Text>오류발생...</Text>
    return <View>{/* 데이터 보여주기.. */}</View>
    
}

 

참고자료 : 리액트 네이티브를 다루는 기술 책