조우

코드 예시

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 />} />
          ...
(생략)

1. 초기 화면 "/"에서, Main 컴포넌트와 그 하위 컴포넌트들이 로드된다. -> Main에서 필요한 코드 조각만 로드

2. 다른 페이지 "/??"로 이동 시, 해당 컴포넌트와 그 하위 컴포넌트들이 로드된다. -> 해당 페이지에서 필요한 코드 조각만 로드

3. "/setting"에 접속할 일이 없다면? Setting 컴포넌트는 로드되지 않음

이처럼 라우터에 loadble을 사용한다면, 페이지 이동 시에만 해당 코드 조각을 불러오는 코드 스플리팅으로 성능을 개선할 수 있다!

더 많은 사용법이 있으니, 공식 홈페이지와 다른 글들을 통해 학습하자!

---

더하기

역시나 무궁무진한 js의 라이브러리 세계!
code splitting을 위한 라이브러리로

• React.lazy
• Loadable Components
• React Suspense

같은 것들이 있다!

---

정리

loadable을 사용하게 되면,

• 장점 : 초기 렌더링 시간은 줄일 수 있음
• 단점 : 다른 페이지로 이동할 때마다 (리렌더링 시마다) 로딩 시간이 느껴질 수 있음

반대로 사용을 하지 않는다면,

• 장점 : 리렌더링이 빠르게 이루어짐
• 단점 : 초기 렌더링 시간이 길다

무조건적으로 사용하기보다, 사용자 경험을 테스트하고 적절하게 사용하는게 좋겠다!
(그래도 사용하는게 훨씬 좋을 것 같긴 하다)