React Query 리액트 쿼리 장점

🙋🏻React Query 리액트 쿼리 장점

안녕하세요 TriplexLab 입니다.

React Query에 대한 이야기를 다시한번 해보도록 하겠습니다.
(지난번에 트러블슈팅 글을 작성했었는데 링크 참고하세요)

최근에 nomadcoder에서 "React JS 마스터클래스"라고 하는 인강을 듣고 있는데 여기서 나오는 이야기가
다음 밑에있는 코드블럭을 React Query를 쓰면 자동으로 해준다. 이 모든 것들을 우리를 위해 숨겨준다. 라고 하고 있습니다.

function Coins() {
    useEffect(() => {
        (async () => {
          const response = await fetch("https://api.coinpaprika.com/v1/coins");
          const json = await response.json();
          setCoins(json.slice(0, 100));
          setLoading(false);
        })()
    },[]);
    return (
        ...
    );
};

useEffect 내부 코드를 React Query로 변경 해볼게요

다음과 같이 기존의 코드는 주석달고, useQuery한줄로 반경했습니다. 그리고 isLoading, data를 받아오고 있습니다.

// src/routes/Coins.tsx

function Coins() {
	const { isLoading, data } = useQuery<ICoin[]>("allCoins", fetchCoins);
    
    /* const [coins, setCoins] = useState<CoinInterface[]>([]);
	const [loading, setLoading] = useState(true);
    useEffect(() => {
        (async () => {
          const response = await fetch("https://api.coinpaprika.com/v1/coins");
          const json = await response.json();
          setCoins(json.slice(0, 100));
          setLoading(false);
        })()
    },[]); */
    
    return (
        ...
    );
};

그리고 api 통신은 다음과 같이 하고 있습니다.

// src/api.ts

export async function fetchCoins() {
	const response = await fetch("https://api.coinpaprika.com/v1/coins");
	if(!response.ok){
		throw new Error('데이터 불러오는데 실패했습니다.')
	}
	const body = await response.json();
	return body;
}

👉🏻정리

여기서 내가 말하고자 하는 React Query의 장점은

기존의 코드를 보면 상태를 지정하기 위한 useState에서 loading, data를 내가 직접 만들어 줘야 했습니다.

하지만 React Query를 사용하면 useQuery훅으로 한줄로 작성이 가능하고 isLoading과, data를 받아올수 있다는것 입니다.

그리고 뿐만 아니라 기존에는 상세페이지를 갔다가 다시 메인 페이지로 돌아오면 "Loading..."라는 글자가 나왔는데 React Query로 변경하면서 부터 "Loading..."은 노출되지 않고 있습니다. (즉 한 번이라도 접속한 페이지이면 두 번째부터 제 접속하는 페이지는 "Loading..."이 없는 것이죠. 이것은 사용자 경험 측면에서 아주 좋을 거라고 생각을 합니다.👏🏻🎉💫)

이것이 가능한 이유는 React Query는 기본적으로 데이터를 캐시에 저장해두기 때문입니다. React Query는 데이터를 파괴하지 않고, 데이터를 유지하고 있어서 가능한 일입니다.