React 18 버전 이후) React에서 코드 분할 하는 방법, dynamic import 방법, React.lazy와 Suspense

코드 분할 (Code Spliting)

번들링을 할 때, HTML 웹 페이지에 JS를 추가하는데, 모던 웹으로 발전하면서 점점 DOM을 다루는 정도가 정교해지면서 JS 코드 자체가 방대해지고 무거워졌다. 

 

이를 해결하기 위한 방법으로, 번들을 물리적으로 나눈 후, 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 것이다. 

=> 이게 바로 코드 분할!

코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다.

 

번들 분할 하는 방법 => 서드파티 라이브러리는 npm을 통해 다운받는 라이브러리인데, 사용자에게 다양한 메소드를 제공하기 때문에 코드의 양이 많고, 번들링 시 많은 공간을 차지한다. 그래서 사용 중인 라이브러리 전부를 불러와서 사용하는 것보다 따로따로 불러와서 사용할 수 있으면 차지하는 공간을  줄일 수 있다. 

---

✔️ React에서 코드 분할 하는 방법 => dynamic import(동적 불러오기)를 사용하기

 

기존 방법 (static import /정적 불러오기)

import moduleA from "library";

 

✔️ dynamic import(동적 불러오기)를 사용하는 방법 => React.lazy와 함께 사용하기

 

React.lazy 사용방법

React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 한다.

import Component from './Component';

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

 

React.Suspense 사용방법

Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할 때 컴포넌트를 불러오게 되는데, 이 과정에서 로딩하는 시간이 생긴다. 

이때 Suspense가 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여준다. 

/* suspense 기능을 사용하기 위해서는 import 해와야 합니다. */
import { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
			{/* 이런 식으로 React.lazy로 감싼 컴포넌트를 Suspense 컴포넌트의 하위에 렌더링합니다. */}
      <Suspense fallback={<div>Loading...</div>}>
				{/* Suspense 컴포넌트 하위에 여러 개의 lazy 컴포넌트를 렌더링시킬 수 있습니다. */}
        <OtherComponent />
				<AnotherComponent />
      </Suspense>
    </div>
  );
}

 

➥ Supense 컴포넌트의 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 React 엘리먼트를 받아들인다. 

 

 

---

✔️ 그래서 React.lazy와 Suspense를 어디에 적용할 수 있는가? 

 

웹 페이지를 불러오고 진입하는 단계인 Route에 이 기능을 적용하는 것이 좋다. 

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>
);

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓