[React] 코드 분할

 

 

목차

• 📍 코드 분할(Code Spliting)
• 🔗  React에서의 코드 분할
• 🔗  React.lazy()
• 🔗  React.Suspense
• 🔗  React.lazy와 Suspense의 적용 

 

 

📌  React 심화

 

 

 

📍 코드 분할(Code Spliting)

 

React는 HTML 웹 페이지에 JS를 추가해야 하기 때문에 번들링을 진행한다.

그러나  JS코드가 점점 무거워지기 때문에 실행 속도가 느려지게 된다. 이를 방지하기 위해

해결방법은 번들을 물리적으로 나누는 것이다.

 

 

번들 분할 혹은 줄이는 법

 

번들링이 진행되면 npm을 통해 서드파티 라이브러리가 포함하게 된다.

🤷🏼 서드파티(Third Party) 라이브러리란?  개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리

그러나 번들링 시 이 라이브러리는 많은 공간을 차지하기 때문에, 따로 따로 불러서 사용할 수 있어야 한다.

 

/* 이렇게 lodash 라이브러리를 전체를 불러와서 그 안에 들은 메소드를 꺼내 쓰는 것은 비효율적입니다.*/
import _ from 'lodash';

...

_.find([]);

/* 이렇게 lodash의 메소드 중 하나를 불러와 쓰는 것이 앱의 성능에 더 좋습니다.*/
import find from 'lodash/find';

find([]);

 

 

 

🔗  React에서의 코드 분할

 

사용하지 않은 컴포넌트까지 한 번에 불러오려면 첫 화면 렌더링 시간 소요가 길어진다,.

이를 해결하기 위해 코드 분할 개념이 도입되었다.

 

 

Static Import

 

코드 파일의 가장 최상위에서 import지시자를 사용해 사용하고자하는 라이브러리 및 파일을 불러오는 방법

 

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

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

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

 

 

dynamic import

 

현재 구분 분석 및 컴파일해야 하는 스크립트의 양을 최소화하기 위해 dynamic import 구문을 지원

 

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

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

 

 

 

🔗  React.lazy()

 

React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링 가능하다.

React는 React.lazy를 통해 컴포넌트를 동적으로 import를 할 수 있기 때문에 이를 사용하면 초기 렌더링

지연시간을 어느정도 줄일 수 있게 되었다.

 

import Component from './Component';

//React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 한다.
/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

 

 

🔗  React.Suspense

 

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

 

 

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