지연로딩을 통한 테스트 진행하기

React.lazy와 Suspense 사용하기
React.lazy는 코드를 분할하게 해주며, 앱 사용자들에게 획기적인 성능 향상을 제공합니다.
Suspense는 구성 요소가 캐시에서 데이터를 로드하는 동안 렌더링을 일시 중단하는 일반적인 방법입니다

App.js

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// import BlogPage, { loader as postsLoader } from './pages/Blog';
import HomePage from './pages/Home';
//import PostPage, { loader as postLoader } from './pages/Post';
import RootLayout from './pages/Root';
import { lazy, Suspense } from 'react';

const BlogPage = lazy(()=>import("./pages/Blog"));
const PostPage = lazy(()=>import("./pages/Post"));


const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: 'posts',
        children: [
          { index: true, element:<Suspense fallback={<p>Loading...</p>}   > <BlogPage /></Suspense>,
            loader: 
            ()=>import("./pages/Blog") .then((module)=>module.loader())
          },
          { path: ':id', 
          element:<Suspense fallback={<p>Loading...</p>}><PostPage /></Suspense>,
            loader: 
            (meta)=> import('./pages/Post') .then((module)=>module.loader(meta)),
        
        },
        ],
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

1.라우터 생성: createBrowserRouter 함수를 사용하여 라우터를 생성합니다. 이 라우터는 앱의 경로 구조를 정의합니다.

2.라우트 정의: 각 라우트는 path와 element를 가지며, children 속성을 통해 하위 라우트를 정의할 수 있습니다. 
index 속성은 해당 경로가 기본 경로일 경우 true로 설정됩니다.

3.지연 로딩: React.lazy와 Suspense를 사용하여 지연 로딩을 구현합니다.
 React.lazy는 동적 import()를 사용하여 컴포넌트를 로드하며, Suspense는 컴포넌트가 로드되는 동안 로딩 표시를 보여줍니다.

4.라우터 제공: RouterProvider 컴포넌트를 사용하여 생성한 라우터를 앱에 제공합니다.

리액트에서 지연 로딩을 사용하는 주요 이유는 성능 향상과 사용자 경험 개선입니다.
 

향상된 사용자 경험: 사용자가 애플리케이션을 처음 방문할 때, 모든 컴포넌트를 한 번에 로드하려고 하면 로딩 시간이 길어질 수 있습니다.

이로 인해 사용자는 느린 반응성을 경험하게 됩니다. 지연 로딩을 사용하면, 사용자가 실제로 방문하는 라우트에 대한 컴포넌트만 로드하므로, 애플리케이션의 초기 로드 시간이 크게 줄어듭니다.

데이터 및 대역폭 절약: 사용자가 애플리케이션의 모든 부분을 방문하지 않을 수 있습니다. 따라서, 사용자가 실제로 필요로 하는 컴포넌트만 로드하면 데이터 사용량을 줄일 수 있습니다. 이는 특히 데이터 사용량에 제한이 있는 모바일 사용자에게 유용합니다.

코드 분할: 큰 규모의 애플리케이션에서는 코드를 여러 번들로 분할하는 것이 유용할 수 있습니다. 이를 통해 애플리케이션의 각 부분을 독립적으로 로드하고 캐시할 수 있습니다. 이는 애플리케이션의 전반적인 성능을 향상시키는 데 도움이 됩니다.

따라서, 리액트 애플리케이션을 배포하기 전에 지연 로딩을 설정하는 것은 매우 중요합니다. 이를 통해 사용자 경험을 향상시키고 애플리케이션의 전반적인 성능을 향상시킬 수 있습니다. 이러한 이유로, 많은 개발자들이 리액트 애플리케이션에서 지연 로딩을 사용하고 있습니다.

소스:

https://github.dev/braverokmc79/macaronics-react-udemy-ex23