TIL 23.03.24

오늘은 코드분할, React.lazy()와 Suspense에 대해서 공부하였다.

 

코드분할이란?

코드를 해석하고 실행하는 정도가 느려졌는지 파악해서,

번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 아이디어

이를 통하여 대규모 프로젝트의 앱인 경우에도 페이지의 로딩 속도를 개선 가능

 

 

React.lazy()와 Suspense()

React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것이다.

Rect.lazy() 통해 컴포넌트를 동적으로 import를 할 수 있어, 사용 시 초기 렌더링 시간을 줄 일 수 있다.

 

하지만 단독으로 쓰일 수는 없고, React.Suspense 컴포넌트의 하위에서만 React.lazy로 감싼

컴포넌트를 사용할 수 있다.

 

 

 

적용 예제

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

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

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

라우터가 분기되는 컴포넌트에서 각 컴포넌트에 React.lazy를 적용시키고, 이를 Suspense로 감싸준다.

 

그 후, 로딩 시 보여줄 화면을 fallback 속성으로 주면, 

초기 렌더링 시간이 줄고 페이지 이동 시 로딩 화면이 나타나게 됌