[React.js] defer() (React Router)

defer() (React Router)

들어가며

• 리액트 라우터(React Router)에서 제공하는 @defer()@에 대해 정리해본다.

 

defer()

개념

• 리액트 라우터(React Router)에서 제공하는 기능
• 데이터를 모두 불러오기 전에 페이지 일부를 먼저 렌더링하고, 데이터가 도착하면 나머지 부분을 렌더링할 수 있도록 해준다.
• 페이지 로딩 속도를 향상시키고, 사용자 경험(UX)을 개선하는 데 도움을 준다.

 

주요 특징

1. 비동기 데이터 로딩
   • @defer@는 비동기 데이터 로딩을 처리하는 데 사용된다.
   • 데이터를 가져오는 동안 일부 페이지 콘텐츠를 먼저 렌더링하고, 데이터가 도착하면 나머지 콘텐츠를 렌더링한다.
2. 빠른 페이지 렌더링
   • 모든 데이터를 기다리지 않고도 페이지 일부를 즉시 렌더링할 수 있어 페이지 로딩 시간을 단축한다.
3. 사용자 경험 향상
   • 사용자에게 더 빠르게 피드백을 제공하여 페이지가 응답하는 느낌을 준다.

 

사용 방법

① 로더 함수 설정

• 먼저, 데이터를 가져오는 비동기 함수를 정의하고 @defer@를 사용하여 데이터를 지연 로딩하도록 설정한다.

import { defer } from 'react-router-dom';

// 비동기 데이터 로딩 함수
async function loadEvents() {
  const response = await fetch('/api/events');
  const resData = await response.json();
  return resData.events;
}

// 로더 함수에서 defer 사용
export function loader() {
  return defer({
    events: loadEvents()
  });
}

 

② 컴포넌트에서 지연 로딩 데이터 사용

• 지연된 데이터를 사용하기 위해 @useLoaderData@, @Await@, @Suspense@ 컴포넌트를 활용한다.

import { useLoaderData, Await } from 'react-router-dom';
import { Suspense } from 'react';

function EventsPage() {
  const data = useLoaderData();

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Await resolve={data.events}>
        {(loadedEvents) => (
          <EventsList events={loadedEvents} />
        )}
      </Await>
    </Suspense>
  );
}

 

주요 속성 및 메서드	설명
@loadEvents@	- 이벤트 데이터를 비동기로 가져오는 함수 - @fetch@를 사용해 데이터를 가져오고, JSON으로 파싱한 후 이벤트 데이터를 반환한다.
@loader@	- @defer@를 사용하여 데이터를 지연 로딩하도록 설정한다. - @defer@ 함수에 객체를 전달하고, @loadEvents@ 함수를 @events@ 키에 할당한다.
@EventsPage@	- @useLoaderData@를 사용하여 로더에서 반환한 데이터를 가져온다. - @Suspense@ 컴포넌트를 사용해 데이터가 로딩되는 동안 표시할 UI를 지정한다. - @Await@ 컴포넌트를 사용하여 데이터가 로드되면 표시할 컴포넌트를 지정한다.

 

참고 사이트

Deferred Data v6.24.1 | React Router