[팀프로젝트] 리액트 코드 분할로 성능 높이기(React.lazy)

 

아래와 같이 동적으로 import 하면 컴포넌트를 불러올 때 파일을 읽기 때문에 초기 로딩 속도가 빠르다는 글을 읽었다.

 

import React, { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";

const Workspace = lazy(() => import("./Workspace"));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/" element={<Workspace />} />
    </Routes>
  </Suspense>
);

export default App;

이전에는 코드를 아래와 같이 작성했는데 router파일에서는 앞으로 위와 같이 코드를 작성해야겠다.

 

참고로 lazy를 사용할 때는 Suspense 컴포넌트로 감싸야 한다.

import React, { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import Workspace from "./Workspace";

const App = () => (
  <Routes>
      <Route path="/" element={<Workspace />} />
  </Routes>
);

export default App;