useEffect와 React Query를 모두 사용하는 반대 예

useEffect와 React Query를 모두 사용하여 React 구성 요소에서 데이터를 가져오고 표시하는 반대 사례를 살펴보겠습니다. 각 접근 방식이 데이터 가져오기와 부작용을 처리하는 방법에 중점을 둡니다.

API에서 현재 개수를 가져오고 이 개수가 실시간으로 업데이트된다고 가정하겠습니다. 목표는 카운터를 표시하고 API의 새 데이터로 업데이트를 유지하는 것입니다.

시나리오 1: useEffect 사용

여기에서는 useEffect를 사용하여 카운터 데이터를 가져오고 상태를 수동으로 처리합니다.

"react"에서 React, { useState, useEffect } 가져오기;

함수 카운터() {
const [count, setCount] = useState(null); // 카운터를 저장할 상태
const [loading, setLoading] = useState(true); // 로딩 상태
const [error, setError] = useState(null); // 오류 처리 상태

useEffect(() => {
const fetchCounter = async () => {
시도해보세요 {
setLoading(true); // 로딩 시작
const 응답 = 가져오기를 기다립니다("/api/counter"); // 카운터 값을 가져오기 위한 API 호출
if (!response.ok) {
throw new Error("카운터를 가져오는 중 오류가 발생했습니다.");
}
const 데이터 = response.json()을 기다립니다;
setCount(data.count); // 카운터 값 설정
} 잡기(오류) {
setError(err.message); // 오류 상태 설정
} 드디어 {
setLoading(false); // 로딩 중지
}
};

fetchCounter(); // Fetch the counter on mount

}, []); // 빈 종속성 배열은 마운트 시 한 번 실행된다는 의미입니다

if (로드 중) 반환

로드 중...;
(오류) 반환 오류: {오류};

반품(

카운터: {count}

);
}

기본 카운터 내보내기

설명:

상태 관리: 개수, 로드, 오류의 세 가지 상태를 수동으로 관리합니다.

데이터 가져오기: fetchCounter 함수는 구성 요소 마운트(빈 종속성 배열)에서 실행되는 useEffect 후크 내에 정의됩니다.

오류 처리 및 로드: 로드 및 오류 상태를 모두 명시적으로 처리해야 합니다.

다시 가져오기: 데이터를 다시 가져와야 하는 경우(예: 사용자가 페이지를 다시 방문하거나 창이 포커스를 다시 얻는 경우) 해당 논리를 수동으로 구현해야 합니다.

시나리오 2: React 쿼리 사용

여기에서는 React Query를 사용하여 데이터 가져오기 프로세스를 단순화합니다. React Query는 캐싱, 로드, 오류 및 다시 가져오기를 자동으로 처리합니다.

"react"에서 React를 가져옵니다.
"반응 쿼리"에서 { useQuery } 가져오기;

함수 카운터() {
const { data, error, isLoading } = useQuery("counter", async () => {
const 응답 = 가져오기 대기("/api/counter");
if (!response.ok) {
throw new Error("카운터를 가져오는 중 오류가 발생했습니다.");
}
return response.json();
});

if (isLoading) return

로드 중...;
(오류) 반환 오류: {error.message};

반품(

카운터: {data.count}

);
}

기본 카운터 내보내기

설명:

상태 관리: React Query는 상태(로딩, 오류, 데이터)를 자동으로 관리합니다. 로드 또는 오류 상태를 명시적으로 설정할 필요가 없습니다.

데이터 가져오기: useQuery 후크는 가져오기를 단순화합니다. 캐싱, 백그라운드 업데이트, 재시도를 자동으로 관리합니다.

오류 처리 및 로드: React Query는 이를 내부적으로 처리하고 후크는 UI에서 직접 사용할 수 있는 isLoading 및 오류 상태를 반환합니다.

다시 가져오기: React Query는 사용자가 페이지를 다시 방문하거나 창에 포커스가 있을 때 자동으로 데이터를 다시 가져옵니다. 간격을 두고 또는 사용자 정의 조건에 따라 다시 가져오도록 설정할 수도 있습니다.

두 가지 접근 방식 비교:

결론:

useEffect는 사용자 정의 또는 일회성 부작용을 처리하는 데 적합하지만 데이터를 가져오는 경우 수동 상태 관리와 더 많은 상용구 코드가 필요합니다.

React 쿼리는 로드, 오류 처리, 캐싱과 같은 일반적인 작업을 추상화하여 데이터 가져오기를 크게 단순화합니다. 자주 변경되는 데이터를 처리하거나 백그라운드 다시 가져오기 및 캐싱과 같은 기능이 필요한 시나리오에 이상적입니다.

위 내용은 useEffect와 React Query를 모두 사용하는 반대 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!