리액트 라우터는 우리가 싱글 페이지 애플리케이션을 개발할 때 사용하는 매우 유용한 라이브러리입니다. 이 라이브러리를 사용하면 클라이언트 측에서의 라우팅을 쉽게 구현할 수 있습니다.

리액트 라우터의 또 다른 강력한 기능 중 하나는 부분 페이지 로딩과 지연 로딩을 지원한다는 것입니다. 부분 페이지 로딩은 페이지 내 특정 컴포넌트만 렌더링하고 싶을 때 사용되며, 지연 로딩은 사용자가 컴포넌트를 요청할 때까지 해당 컴포넌트를 로드하지 않는 것을 의미합니다.

부분 페이지 로딩

부분 페이지 로딩은 주로 대형 애플리케이션에서 사용됩니다. 이 경우 모든 페이지를 처음에 로딩하는 것은 매우 비효율적일 수 있습니다.

리액트 라우터는 React.lazy와 Suspense라는 두 가지 기능을 제공하여 부분 페이지 로딩을 구현할 수 있습니다. React.lazy 함수를 사용하면 동적으로 컴포넌트를 로드할 수 있습니다.

아래는 React.lazy를 사용하여 컴포넌트를 동적으로 로딩하는 예제입니다.

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

위 코드에서 LazyComponent는 동적으로 로드되는 컴포넌트입니다. Suspense 컴포넌트는 로딩 중일 때 보여줄 대체 컨텐츠를 지정할 수 있습니다. 로딩이 완료되면 LazyComponent가 렌더링됩니다.

지연 로딩

리액트 라우터를 사용하여 컴포넌트를 지연 로딩할 수도 있습니다. 이렇게 하면 페이지를 처음 로드할 때 모든 컴포넌트를 로딩하는 것이 아니라, 실제로 사용자가 해당 컴포넌트를 요청할 때까지 로딩을 지연시킬 수 있습니다.

아래는 리액트 라우터를 사용하여 지연 로딩을 구현하는 예제입니다.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

위 코드에서 Home과 About 컴포넌트는 실제로 사용자가 해당 경로로 이동할 때까지 로딩되지 않습니다. 사용자가 / 경로로 이동하면 Home 컴포넌트가, /about 경로로 이동하면 About 컴포넌트가 동적으로 로딩되어 렌더링됩니다.

리액트 라우터의 부분 페이지 로딩과 지연 로딩은 사용자 경험을 향상시키고 애플리케이션의 성능을 향상시킬 수 있는 강력한 기능입니다. 부분 페이지 로딩과 지연 로딩을 적절히 활용하여 애플리케이션을 개발해 보세요!

참고 자료:

• React Router - Code Splitting
• React.lazy()