코드 스플리팅(code splitting)
코드 스플리팅(code splitting)은 React 애플리케이션의 번들 크기를 줄이기 위해 사용하는 기술이다다. 큰 React 애플리케이션을 작은 청크(chunks)로 나누어, 사용자가 요청하는 페이지나 컴포넌트에 따라 필요한 청크만 로드하는 방식으로 작동한다. 이로 인해 초기 로딩 시간이 줄어들고 애플리케이션의 성능이 향상된다.
쉬운 설명
코드 스플리팅을 이해하는데 있어서, 대형 쇼핑몰을 생각해보는 것이 도움이 될 수 있다.
만약 당신이 대형 쇼핑몰에 가서 특정 상품을 사려고 한다. 이 쇼핑몰은 엄청나게 크고 다양한 상품들이 있다. 그런데 쇼핑몰의 입장에서, 당신이 상품을 사기 위해 쇼핑몰에 들어올 때마다 모든 상품을 한 번에 보여주려고 한다면, 그것은 엄청나게 비효율적일 것이다. 당신이 찾는 상품을 찾기도 전에 피곤해질 수도 있고, 쇼핑몰 자체가 너무 느려져서 제대로 작동하지 않을 수도 있다.
하지만 코드 스플리팅을 적용한 쇼핑몰에서는, 당신이 들어오면 먼저 필요한 기본적인 것들만 보여준다. 그리고 당신이 특정 카테고리나 상품을 찾기 시작하면, 그 때 필요한 상품들만 가져와서 보여준다. 이렇게 하면, 당신은 더 빠르게 원하는 상품을 찾을 수 있고, 쇼핑몰도 더 빠르게 응답할 수 있다.
이것이 바로 React 애플리케이션에서 코드 스플리팅이 하는 일이다. 애플리케이션은 대형 쇼핑몰과 같고, 컴포넌트와 페이지들은 쇼핑몰의 다양한 상품들과 같다. 코드 스플리팅을 사용하면, 사용자가 필요로 하는 특정 컴포넌트나 페이지만 로드하여, 애플리케이션의 초기 로딩 시간을 줄이고 성능을 향상시킨다.
React에서 loadable을 사용해서 코드 스플리팅을 하는 방법
- 먼저, 프로젝트에 @loadable/component를 설치한다.
npm install @loadable/component
- 필요한 컴포넌트를 동적으로 불러오도록 코드를 수정한다. 예를 들어, MyComponent라는 컴포넌트를 코드 스플리팅하려면 다음과 같이 작성할 수 있다.
import loadable from "@loadable/component"; const MyComponent = loadable(() => import("./MyComponent")); function App() { return ( <div> <MyComponent /> </div> ); } export default App;
- 그리고 나서, MyComponent를 사용하는 부분에서는 이 컴포넌트가 필요할 때 비로소 별도의 청크로서 로드된다.
장점
- 성능 최적화: 초기 로드 시간이 줄어들며, 사용자는 필요한 컨텐츠에 더 빨리 접근할 수 있다.
- 서버 사이드 렌더링 지원: loadable-components는 서버 사이드 렌더링과 호환된다. 이는 React.lazy()가 제공하지 않는 기능이다.
- 플렉시블한 로딩과 에러 처리: loadable은 컴포넌트 로딩 중, 또는 에러 발생 시 표시할 컴포넌트를 지정하는 기능을 제공한다.
단점
- 추가적인 복잡성: 서드파티 라이브러리를 사용하면 기본적으로 새로운 개념과 API를 배워야 하며, 프로젝트 구조가 약간 복잡해질 수 있다.
- 빌드 설정 변경 필요성: 경우에 따라 웹팩(webpack) 같은 번들러의 설정을 조정해야 할 수도 있다.
정리
결론적으로, loadable-components는 큰 규모의 React 애플리케이션에서 성능을 향상시키는 데 매우 유용하며, 특히 서버 사이드 렌더링을 사용하는 경우에 더욱 빛을 발한다. 하지만 작은 프로젝트의 경우에는 React.lazy()로도 충분히 코드 스플리팅을 구현할 수 있다.
