[React] 코드 스플리팅(Code Splitting)

 

A, B, C 로 구성된 싱글 페이지 애플리케이션(SPA)을 개발한다고 가정하였을 때, 사용자가 A 페이지에 방문했다면 B, C 페이지에서 사용하는 컴포넌트 정보는 필요하지 않습니다. 이를 필요로 할때는 B 혹은 C 페이지로 이용하려고 할 때만 필요하게 됩니다.

하지만 리액트 프로젝트에서는 별도로 설정하지 않으면 A, B, C 컴포넌트에 대한 코드가 모두 한 파일에 저장되어 버립니다. 만약 애플리케이션의 규모가 커지면 지금 당장 필요하지 않은 컴포넌트 정보도 모두 불러오면서 파일의 크기가 매우 커져버리겠죠?

그러면 로딩이 오래 걸리고, 사용자의 경험도 안 좋아지며, 트래픽도 많이 나오게 됩니다.

이러한 문제점을 해결해 줄 수 있는 방법은 코드 비동기 로딩입니다. 이 또한 코드 스플리팅 방법 중 하나 입니다.

코드 비동기 로딩을 통해 JavaScript 함수, 객체 혹은 컴포넌트를 처음에는 불러오지 않고 필요한 시점에 불러와서 사용할 수 있습니다.

 

JavaScript 함수 비동기 로딩

컴포넌트 코드 스플리팅을 하기 전에 JavaScript 함수 스플리팅을 보여드리겠습니다.

 

일반 JavaScript 함수 스플리팅 

notify.js

export default function notify() {
	alert('안녕!');
}

 

import를 상단에서 불러와서 사용하는 예

src/App.js

import notify from './notify';

function App() {
	const onClick = () => {
    	notify();
    };
    return (
    	<div className="App">
        	<header>
            	<p onClick={onClick}>클릭 해주세요!</p>
            </header>
        </div>
    );
}

export default App;

위와 같이 코드를 작성하면 당장 필요하지 않은 컴포넌트 정보도 모두 불러오게 됩니다.

하지만 import를 상단에서 하지 않고 import()함수 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 저장합니다. 그리고 실제 함수가 필요한 지점에 파일을 불러와서 함수를 사용할 수 있습니다.

이 작업은 아래와 같이 하면 됩니다.

 

import를 함수 형태로 메서드 안에서 사용하는 예

src/App.js 

function App() {
	const onClick = () => {
    	import('./notify').then(result => result.default());
    };
    return (
    	<div className="App">
        	<header>
            	<p onClick={onClick}>클릭 해주세요!</p>
            </header>
        </div>
    );
}

export default App;

import를 함수로 사용하면 Promise를 반환하게 됩니다.

이렇게 import()로 사용하는 문법은 표준 자바스크립트가 아니지만, dynamic import 라는 문법입니다.

이제 '클릭 해주세요!'를 클릭하는 시점에 새로운 자바스크립트 파일을 불러올 것입니다.

불러온 파일의 내용을 확인해 보면 norify에 관련되 코드만 들어 있습니다.

 

React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

코드 스플리팅을 위해 리액트에 내장된 기능으로

유틸 함수인 React.lazy와 컴포넌트인 Suspense가 있습니다.

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고도 정말 간편하게 컴포넌트 코드 스플리팅을 할 수 있습니다.

 

React.lazy

컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해주는 유틸 함수.

사용법 예시

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

 

Suspense

Suspense는 리액트 내장 컴포넌트.

• 코드 스플리팅된 컴포넌트를 로딩하도록 발동 시킬 수 있음.
• 로딩이 끝나지 않았을 때 보여줄 UI를 설정 할 수 있음.

 

Suspense에서 fallback props를 통해 로딩 중에 보여줄 JSX를 지정 할 수 있습니다.

사용법 예시

import { Suspense } from 'react';

(...)

<Suspense fallback={<div>로딩중...</div>}>
	<SplitCode />
</Suspense>

 

 

 

 

참고 : [서적] 리액트를 다루는 기술