[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