[React] 코드 분할(Code spliting)

코드 분할 개념의 도입 배경

React는 SPA 방식으로서, 사용하지 않는 모든 컴포넌트까지 한 번에 불러오기 때문에 첫 화면이 렌더링될 때 시간이 많이 소요된다는 단점을 지니고 있다. 따라서 사용하지 않는 컴포넌트는 차후에 불러올 수 있도록 코드 분할 개념이 도입되었다.

 

코드 분할 방법

'동적 불러오기(Dynamic import)' 방식을 사용함으로써 코드 분할이 가능하다.
(그 전까지는 '정적 불러오기(Static Import)' 방식을 사용했다.)

 

[Static Import의 예시]

/* 기존에는 파일의 최상위에서 import 지시자를 이용해 라이브러리 및 파일을 불러왔습니다. */
import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  /* 그리고 코드 중간에서 불러온 파일을 사용했습니다. */
}

 

[Dynamic Import의 예시]

form.addEventListener("submit", e => {
  e.preventDefault();
	/* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */
  import('library.moduleA')
    .then(module => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
    /* moduleA를 여기서 사용합니다. */
}

 

동적 불러오기(Dynamic import) 

React.lazy 및 Suspense와 함께 사용할 수 있다.

 

React.lazy()

• React.lazy 함수를 사용하면 '동적 불러오기'를 사용해서 동적으로 컴포넌트 렌더링이 가능하다.
• 따라서 이를 사용하면 초기 렌더링 지연시간을 어느정도 단축시킬 수 있다.
• 단독으로 쓰일 수 없으며 Suspense와 함께 사용해야 한다.

 

React.Suspense

• Router로 분기가 나누어진 컴포넌트들을 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 이 때 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때, 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여준다.
• fallback 속성 : 컴포넌트가 로드되는 동안 보여줄 로딩 화면을 띄워주는 역할. 엘리먼트를 적어준다.

[코드 예시 1]

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

 

[코드 예시 2]

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

const Home = React.lazy(() => import('./routes/Home'));
const About = React.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>
);