useEffect와 React Query를 모두 사용하는 반대 예-JS 튜토리얼-php.cn

카운터: {count}

카운터: {data.count}

집

웹 프론트엔드

JS 튜토리얼

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

DDD

Sep 18, 2024 pm 06:24 PM

Counter example using both useEffect and 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};

반품(