React에서 게으른 일시 중지

카르멘 살라스

저는 현재 React 애플리케이션의 성능을 최적화하는 방법을 배우고 있습니다. 응용 프로그램에서 구성 요소를 렌더링하려는 경우 시간이 걸리고 응용 프로그램 속도가 느려질 수 있습니다. 제가 배우고 있는 React 함수 중 하나는 React.lazy 입니다. 이 기능을 사용하면 구성 요소가 지연 로드될 수 있습니다. React의 최신 기능인 Suspense와 함께 게으름을 사용하는 방법에 대해 이야기해 봅시다.

다음을 살펴보겠습니다.

지연 로딩이란 무엇이며 이것이 중요한 이유는 무엇입니까?

React에서 지연 로딩이란 무엇입니까?

React에서 서스펜스가 무엇입니까?

React 애플리케이션에서 React.lazy 및 Suspense를 사용하는 방법

지연 로딩이란 무엇이며 왜 중요한가요?

지연 로딩은 웹 페이지의 모든 콘텐츠를 한 번에 렌더링하지 못하게 합니다. 지연 로드는 사용자가 페이지의 해당 부분에 도달할 때만 페이지의 콘텐츠를 렌더링하도록 허용합니다. 사용자가 해당 콘텐츠가 있는 페이지 섹션에 도달하지 않으면 애플리케이션은 기본적으로 콘텐츠 렌더링을 보류합니다.
이것의 이점은 애플리케이션에서 콘텐츠 전달을 위한 시간과 공간을 최적화한다는 것입니다.

React에서 지연 로딩이란 무엇입니까?

React에는 코드 분할을 통해 페이지의 콘텐츠를 지연 로드하기 쉽게 만드는 기능react.lazy이 있습니다.
react.lazy 전체 페이지를 렌더링할 때 자동으로 로드하기 위해 가져오는 구성 요소 번들
react.lazy가 작동하는 방식은 동적 가져오기를 호출해야 하는 함수를 사용하는 것입니다. 이는 애플리케이션에 있는 기본 내보낸 모듈로 확인되는 약속이 반환됨을 의미합니다.

응용 프로그램에서 사용하는 방법은 다음과 같습니다.

const Banner = React.lazy(() => import('../HomePage/Banner'));

이렇게 하면 애플리케이션에서 Banner 구성 요소를 사용할 때 일반적으로 가져오는 방식과 달리 느리게 로드됩니다.

import Banner from '../HomePage/Banner';

이제 응용 프로그램에서 지연 기능을 사용하려면 지연 구성 요소를 Suspense 구성 요소로 래핑해야 합니다.

리액트에서 서스펜스란?

<Suspense> 구성 요소는 React 16.6에 새로 추가되었습니다. 기본적으로 로드하려는 항목이 로드할 준비가 되었는지 확인하고 대기하는 동안 Suspense 가 fallback 를 렌더링합니다.Suspense는 로딩 상태인 폴백이라는 소품을 가져옵니다.
로드하는 동안 Suspense는 로드 스피너 또는 텍스트와 같은 구성 요소가 될 수 있는 폴백을 제공합니다.

React 애플리케이션에서 React.lazy 및 Suspense를 사용하는 방법

이제 우리는 Lazy와 Suspense가 함께 작동하여 콘텐츠를 애플리케이션에 지연 로드하는 방법을 알았으므로 코드가 어떻게 보이는지 살펴보겠습니다.

이것이 지연 구성 요소를 Suspense 구성 요소로 래핑하는 방법입니다.

import React, { Suspense } from 'react';
import Spinner from 'react-bootstrap/Spinner';

<Suspense fallback={<Spinner animation="border" variant="info" />}>
    <Banner/>
</Suspense>

여기에서 지연 구성 요소Banner를 Suspense 구성 요소로 래핑하고 Suspense의 폴백을 React Bootstrap에서 가져온 스피너 구성 요소로 설정했습니다.

아주 간단하죠?

그러면 내 애플리케이션에서 배너 구성 요소가 느리게 로드됩니다. React-bootstrap 스피너를 로드하는 동안 Suspense 구성 요소가 배너 구성 요소가 준비되었는지 확인하기 위해 기다리는 동안 페이지에 렌더링됩니다.

다음과 같이 표시됩니다.



결론적으로,

이러한 React의 새로운 기능은 구성 요소를 로드하고 렌더링할 때 애플리케이션의 성능을 최적화하는 데 정말 좋습니다. 이는 반응 구성 요소에서 지연 로딩을 구현하는 방법을 보여주는 매우 간단한 방법이지만 지연 및 Suspense를 사용하여 애플리케이션을 업그레이드하고 이점을 얻을 수 있는 무한한 가능성이 있습니다. 사용해 보세요!

Unsplash에서 Jen Theodore의 표지