React에서 useQuery를 사용하지 않고 데이터를 가져오면 React 자체를 통해 데이터를 가져오거나 업데이트할 다른 방법이 없습니다.
따라서 자체 서버에서 데이터를 가져오거나 api를 사용할 때 가져오기 또는 axios를 사용해야 합니다.
Fetch나 Axios를 적극적으로 사용해 본 적이 없는 리액션 개발자라면 useQuery를 사용해야 하는 이유에 대해 깊이 생각해야 합니다.
React에서 Fetch를 통해 데이터를 가져올 때 일반적인 패턴은 다음 코드와 같습니다.
import { useState, useEffect } from "react";
function Example() {
const (isLoading, setIsLoading) = useState(true);
const (error, setError) = useState(null);
const (data, setData) = useState(true);
useEffect(() => {
fetch("https://www.example.com/api...")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("데이터를 불러오는데 실패했습니다.
");
}
})
.then((result) => {
setData(result);
})
.catch((error) => {
setError(error);
})
.finally(() => {
setIsLoading(false);
})
}, ());
}
export default Example;로드 처리, 데이터 처리 및 오류 처리에 대한 상태 선언은 먼저 useState를 통해 수행된 다음 특정 구성 요소가 렌더링될 때 수행됩니다.
API를 다시 호출하지 않으려면 useEffect에서 가져오기를 실행하세요. 가져오기 후 응답 상태가 200이면 json
그렇지 않은 경우 catch 문이 오류를 받을 가능성이 높도록 오류를 발생시킵니다.
json이 반환되면 이전에 선언된 useState에 데이터를 넣고, 그렇지 않으면 catch 문에 오류를 할당합니다.
그리고 응답 성공 여부와 관계없이 로딩이 완료되었으므로 setIsLoading을 false로 지정합니다.
이는 React 전체에 데이터를 로드하는 일반적인 방법입니다.
그러나 useQuery를 사용하면 약 30줄의 코드가 한 줄로 끝나는 이점이 있습니다.
한 줄의 끝이 공덕의 끝인가?
useQuery를 사용하는 이유는 코드가 더 깨끗하고 단순해졌기 때문만은 아닙니다.
useQuery에는 많은 이점이 있지만 제 생각에 가장 큰 이점은 데이터가 캐시된다는 것입니다.
아마도 저와 같은 주니어 개발자는 스스로 데이터 캐싱을 구현하는 데 많은 땀을 흘릴 것입니다.
캐시된다는 것은 리소스를 절약할 수 있다는 것과 같습니다.
구성 요소 A와 구성 요소 B가 있다고 가정합니다.
구성 요소 A를 구성 요소 B의 부모로 두고 경로를 “/”로 지정합니다.
컴포넌트 B의 경로가 “/example”이라고 가정해 보겠습니다.
이때 B를 방문했을 때 컴포넌트 B로부터 데이터를 받는 부분이 있다면 다시 A를 방문하고 B를 다시 방문한다.
데이터를 캐싱하지 않기 때문에 데이터 조회 부분은 useEffect에서 수행되며, 사용자는 컴포넌트를 방문할 때마다 API를 쿼리하여 데이터를 조회해야 합니다.
즉, 사용자는 로딩 화면을 봐야 합니다.
동적인 움직임이 많은 동적 페이지이기 때문에 데이터를 캐싱하지 않으면 리소스 낭비로 이어집니다.
React useQuery는 이 문제를 해결하기 위해 데이터 캐싱을 지원합니다.
물론 무료입니다.
React useQuery 사용법 안내
function Example() {
const getData = () => {
return fetch("https://www.example.com/api...").then((response) => response.json());
}
const {isLoading, error, data} = useQurey(("keyname"), getData);
export default Example;이전에 보았던 30줄 정도의 코드가 6줄로 줄었습니다.
물론 api.js에서 데이터를 가져오는 getData 함수를 분리하여 가져오면 코드를 훨씬 깔끔하게 만들 수 있습니다.
사용 방법은 다음과 같습니다.
useQurey의 첫 번째 인수로 useQurey의 이름을 지정합니다.
고유해야 하므로 중복 없이 사용해야 합니다.
겹치고 싶다면 (“keyname”, “etc”..)와 같은 이름을 지정할 수 있습니다.
React 18 이상 버전부터는 이름을 첫 번째 인수로 전달할 때 대괄호도 표시되어야 합니다.
두 번째 인수는 호출할 함수를 호출하는 콜백 함수입니다.
하지만 콜백 함수는 프라미스를 반환해야 하므로 다음과 같이 getData 함수를 작성했습니다.
그런 다음 JavaScript 분해 구문을 사용하여 각 변수에 할당됩니다.
위와 같은 일련의 과정을 자동으로 처리할 수 있어 정말 편리합니다.