loadable() 이란?
요약: 코드스플리팅은 초기 로딩속도를 향상시키기 위한 것이다. CodeSplitting(코드분할)이란? 필요한 모듈을 정적으로 받아오는 것이 아닌 동적으로 런타임시에 필요할 때 필요한 모듈만을 불러오는 것. 즉 JS 코드 번들을 잘게 쪼개서 필요할 때마다 로드할 수 있도록 사용하는 기술! 즉, 미리 로드해야 하는 코드의 양을 줄여서 초기 로딩 시간을 개선할 수 있다!
코드 예시
import Component1 from "Components/Component1";
const Component2 = loadable(() => {
return import("Components/Component2");
});
...
<Route path="/1" element={<Component1 />} />
<Route path="/2" element={<Component2 />} />
...협업하는 팀원이 만들어놓은 App 파일에서 6주차에야 눈에 들어온 loadable().
나는 여태까지 모든 컴포넌트들을 단순 import해서 사용했는데, 도대체 이 loadable은 뭘까? 습관처럼 사용하던 import와 무슨 차이가 있을까? Component1과 Component2의 차이가 뭐냐구!
학습
What?
코드 스플리팅(code splitting)을 위한 라이브러리
코드 스플리팅이 뭔데?
JS 코드 번들을 잘게 쪼개서 필요할 때마다 로드할 수 있도록 사용하는 기술!
즉, 미리 로드해야 하는 코드의 양을 줄여서 초기 로딩 시간을 개선할 수 있다!
공식 홈페이지는 이곳
Why?
그래서 이걸 왜 쓰냐면...
리액트 번들이 크고 복잡한 프로젝트는 초기 로딩 시간이 오래 걸려서 좋지 못한 사용자 경험을 야기할 수 있다.
웹 페이지에 들어갔는데 내가 아마 잘 들어가지도 않을 페이지까지 전부 로딩하느라고 초기 화면 뜨기까지 오래 걸린다면...? 😨
그래서! loadable을 통해,
"현재 페이지를 렌더링 하는 데에 필요한 코드만 로드되도록"
-> 빠른 초기 로딩 속도
-> 더 나은 사용자 경험으로 이어짐
이렇게 사용자 경험과 성능을 향상시키기 위함이다!
How?
우선 loadable은 라이브러리니까, 설치 먼저!
npm install -S @loadable/component
가장 간단한 사용법은, 아무래도 라우터 기준의 코드가 좋겠다.
import loadable from "@loadable/component";
(생략)
const Main = loadable(() => {
return import("pages/Main");
});
const Setting = loadable(() => {
return import("pages/Setting");
});
...
(생략)
<Route path="/" element={<Main />} />
<Route path="/setting" element={<Setting />} />
...
(생략)
- 초기 화면 "/"에서, Main 컴포넌트와 그 하위 컴포넌트들이 로드된다. -> Main에서 필요한 코드 조각만 로드
- 다른 페이지 "/??"로 이동 시, 해당 컴포넌트와 그 하위 컴포넌트들이 로드된다. -> 해당 페이지에서 필요한 코드 조각만 로드
- "/setting"에 접속할 일이 없다면? Setting 컴포넌트는 로드되지 않음
이처럼 라우터에 loadble을 사용한다면, 페이지 이동 시에만 해당 코드 조각을 불러오는 코드 스플리팅으로 성능을 개선할 수 있다!
더하기
역시나 무궁무진한 js의 라이브러리 세계!
code splitting을 위한 라이브러리로
- React.lazy
- Loadable Components
- React Suspense
같은 것들이 있다!
정리
loadable을 사용하게 되면,
- 장점 : 초기 렌더링 시간은 줄일 수 있음
- 단점 : 다른 페이지로 이동할 때마다 (리렌더링 시마다) 로딩 시간이 느껴질 수 있음
반대로 사용을 하지 않는다면,
- 장점 : 리렌더링이 빠르게 이루어짐
- 단점 : 초기 렌더링 시간이 길다