이번 글은 Redux와 Code Splitting에 대해 알아보려고 한다.
Redux
Redux 란?
Redux는 애플리케이션의 state를 관리하기 위한 오픈소스 자바스크립트 라이브러리이며 상태를 store에 저장하면 모든 컴포넌트가 어디에서든 원하는 state를 store에서 가져와서 사용할 수 있다. React 또는 Angular와 같은 라이브러리와 함께 가장 일반적으로 사용된다.
Code Splitting
Webpack 이란?
Code Splitting을 설명하기 앞서 Webpack의 개념을 알아야한다. Webpack이란? 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 오픈소스 자바스크립트 모듈 번들러이다. 하나의 파일로 만들어주는 이유는 클라이언트에서 웹 페이지에 접속을 한다고 하면 수 많은 웹 자원을 서버에 요청한다. 이와 같이 웹페이지를 보여주기 위해 서버와 여러번 통신하게 되면 비효율적이기 때문에 모듈 번들러를 통해 하나의 파일로 묶어서 한번에 요청하여 웹 자원을 가져올수 있다. 하지만 이와 같은 경우 하나의 큰 파일로 한번에 가져오기 때문에 초기 로딩 속도가 느려질수 있다. 이를 해결하기 위해 Code Splitting 방법을 사용하면 된다.
Code Splitting 이란?
Code Splitting은 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 필요한 자원만 다운 받아 성능을 향상 시키는 방법이다.
1. import ()
import를 컴포넌트 내부에서 함수처럼 활용하여 Code Splitting 할 수 있다.
변경 전
|
1
2
3
4
5
6
7
8
9
10
|
import { add } from './math';
...
handleClick = () => {
console.log(add(16, 26));
}
...
|
cs |
변경 후
|
1
2
3
4
5
6
7
8
9
10
|
...
handleClick = () => {
import("./math").then(math => {
console.log(math.add(16, 26));
});
}
...
|
cs |
변경 전에는 컴포넌트를 실행하면 math.js를 불러오지만 import를 통해 Code Splitting을 하면 handleClick 함수를 호출할 때 math.js를 불러온다.
2. React.lazy / Suspense
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
|
cs |
React.lazy는 컴포넌트를 렌더링 하는 시점에서 비동기적으로 로딩할 수 있게 해주며, React.lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링 되어야 한다. Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 콘텐츠를 보여줄 수 있게 해준다.
참고
Comment