React의 Fetch Waterfall 이해 및 방지

React 개발자라면 요청 폭포 또는 네트워크 폭포라고도 불리는 가져오기 폭포를 접했을 가능성이 높습니다. 공들여 디자인한 페이지를 로드하는 데 시간이 너무 오래 걸리는 것이 무엇인지 확인하려고 하면 분석 도구에 독특한 모양이 나타납니다.

이 블로그 게시물에서는 페치 워터폴(Fetch Waterfall)이 무엇인지, 왜 발생하는지, React 애플리케이션에 어떤 영향을 미치는지, 가장 중요하게는 이를 방지하는 방법에 대해 설명하겠습니다.

페치 폭포란 무엇입니까?

기본부터 시작하겠습니다.

가져오기 폭포는 여러 API 호출 또는 가져오기 요청이 서로 연결되어 차례로 실행될 때 발생하는 성능 문제입니다. 여러 요청을 병렬로 보내는 대신(동시에 완료할 수 있음) 요청이 대기열에 추가되어 순서대로 실행됩니다. 이로 인해 특히 가져오기 수가 증가하는 경우 페이지 렌더링이 크게 지연됩니다.

다음은 이것이 어떻게 생겼는지에 대한 간단한 시각적 표현입니다.

출처: Sentry.io

위 이미지를 보면 '폭포수' 패턴으로 순차지연이 뚜렷하게 나타나는 것을 확인할 수 있습니다. 각 요청은 이전 요청이 완료된 후에만 시작됩니다. 실제로는 하나의 요청이 약간만 지연되어도 전체 페이지 로드 시간이 크게 늘어날 수 있습니다.

현대 웹 사용자는 빠른 로딩 애플리케이션을 기대하기 때문에 이는 사용자 경험에 특히 문제가 됩니다. 몇 초만 지연되면 이탈률이 높아지고 참여도가 낮아지고 애플리케이션의 전반적인 성공에 영향을 미칠 수 있습니다.

Fetch 폭포는 왜 발생하는가?

React의 Fetch Waterfall은 일반적으로 구성 요소의 계층 구조로 인해 발생합니다. 일반적인 시나리오는 다음과 같습니다.

1. 상위 구성 요소가 데이터를 가져옵니다: 상위 구성 요소는 마운트 시 가져오기 요청을 시작합니다.
2. 하위 구성 요소가 데이터를 기다립니다: 하위 구성 요소는 상위 구성 요소가 가져온 데이터에 의존하며 상위 구성 요소를 사용할 수 있는 경우에만 렌더링됩니다.
3. 순차 요청: 중첩된 구성 요소가 여러 개 있는 경우 각 구성 요소는 가져오기 요청을 순차적으로 트리거하여 "폭포수" 효과를 일으킬 수 있습니다.

이 계단식 동작은 React의 구성 요소가 비동기적으로 렌더링되기 때문에 발생합니다. 상위 구성 요소가 데이터를 가져올 때 하위 구성 요소는 상위 구성 요소의 요청이 완료될 때까지 기다려야 할 수 있습니다. 이러한 가져오기가 효율적으로 처리되지 않으면 각 요청이 이전 요청에 따라 달라지므로 상당한 지연이 발생할 수 있습니다.

가져오기 폭포를 식별하는 방법

React 애플리케이션이 폭포수 가져오기로 인해 어려움을 겪고 있는지 확인하려면 Chrome DevTools 또는 React DevTools와 같은 도구를 사용하여 네트워크 요청 및 성능을 모니터링할 수 있습니다. Chrome DevTools에서 네트워크 탭으로 이동하여 페이지 로딩 프로세스를 차단하는 순차 API 호출을 찾아보세요.

React DevTools에서는 구성 요소 다시 렌더링을 검사하고 가져오기 요청이 여러 번 트리거되도록 하는 불필요한 종속성을 식별할 수 있습니다.

다음은 가져오기 폭포가 발생할 수 있는 몇 가지 징후입니다.

• 느린 페이지 로드 시간: 페이지 로드 시간이 예상보다 오래 걸리는 경우.
• 의심스러운 성능 패턴: 병렬이 아닌 순차적으로 이루어진 것처럼 보이는 일련의 API 호출을 발견한 경우.

React에서 가져오기 폭포(Fetch Waterfall)를 방지하는 방법

다행히도 폭포수 가져오기를 방지하고 더 나은 성능을 위해 React 애플리케이션을 최적화할 수 있는 몇 가지 전략이 있습니다.

1. 병렬로 데이터 가져오기

다음 API 요청을 시작하기 전에 각 API 요청이 완료될 때까지 기다리는 대신 여러 가져오기 요청을 병렬로 실행하는 것이 좋습니다. 이는 여러 Promise를 동시에 실행할 수 있는 JavaScript의 Promise.all() 메서드를 사용하여 수행할 수 있습니다.

다음은 데이터를 병렬로 가져오는 예입니다.

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

데이터를 병렬로 가져오면 총 대기 시간이 줄어들고 브라우저가 리소스를 더 빠르게 로드할 수 있습니다.

2. 구성요소 데이터 가져오기 분리

구성 요소가 자체 가져오기를 트리거하기 위해 상위 구성 요소의 데이터에 의존하지 않도록 구성 요소를 리팩터링할 수 있습니다. 대신, 각 하위 구성 요소가 자체 데이터 가져오기를 독립적으로 처리하도록 하세요. 상태를 끌어올리고 필요한 데이터를 전달하거나 React Query 또는 SWR과 같은 라이브러리를 사용하여 구성 요소 수준에서 가져오기를 관리하면 됩니다.

3. React 쿼리 또는 SWR 사용

React Query 및 SWR과 같은 라이브러리는 React 애플리케이션에서 데이터 가져오기를 관리하는 데 적합합니다. 캐싱, 백그라운드 데이터 가져오기 및 오류 처리를 처리하는 동시에 효율적으로 병렬로 데이터를 가져올 수도 있습니다.

예를 들어 React Query는 데이터 가져오기를 위한 캐싱, 재시도 및 백그라운드 동기화를 자동으로 처리하여 구성 요소가 불필요하게 데이터를 기다리지 않고 필요할 때만 네트워크 호출이 이루어지도록 합니다.

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

4. 중복 요청을 줄이기 위한 캐시 데이터

캐싱을 사용하면 서버에 대한 중복 요청의 필요성을 크게 줄일 수 있습니다. 가져온 데이터를 로컬에 저장하면(구성 요소 상태, 컨텍스트 또는 React Query와 같은 캐싱 라이브러리에) 불필요한 네트워크 요청을 방지하여 애플리케이션을 더 빠르고 효율적으로 만들 수 있습니다.

결론

React의 Fetch Waterfall은 성능 병목 현상의 주요 원인이 될 수 있지만 올바른 전략을 사용하면 쉽게 피할 수 있습니다. 병렬로 데이터를 가져오고, 구성 요소에서 데이터 가져오기를 분리하고, React Query와 같은 강력한 라이브러리를 활용함으로써 React 애플리케이션의 성능을 향상하고 사용자 경험을 향상시킬 수 있습니다.

React 코드베이스에서 빈번한 가져오기 폭포를 처리하는 경우 한 걸음 물러서서 데이터 가져오기 패턴을 분석하고 이러한 모범 사례를 구현하는 것이 좋습니다. 궁극적으로 애플리케이션이 API와 상호 작용하는 방식을 최적화하면 더 빠르고 안정적이며 확장 가능한 애플리케이션을 얻을 수 있습니다.

위 내용은 React의 Fetch Waterfall 이해 및 방지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!