코드 분할

코드 분할

코드 분할 – React

번들링

• 코드들이 import 로 엮여있는 경우 이를 webpack등 툴을 통해 묶어줍니다.

---

코드 분할

• 앱의 크기가 커지면 번들도 커지기 때문에 로드가 오래걸릴 수 있습니다.
• 이를 통해 초기 로딩 비용을 줄일 수 있습니다.

---

import()

동적 import()문을 통해 코드를 분할하는 것이 가장 좋습니다.

import("./math").then(math => { console.log(...)}));

webpack이 해당 구문을 만나게 되면 코드를 분할합니다. 또한 Next.js도 이를 지원합니다. 만약 Babel을 사용한다면 동적 import를 다른 것으로 변환하지 않도록 해당 옵션을 사용해야 합니다.

---

React.lazy

React.lazy 함수를 사용하면 동적 import를 사용해 컴포넌트를 렌더링 할 수 있습니다. lazy는 default export를 가진 모듈 객체가 실행되는 Promise가 반환됩니다. lazy로 불러온 컴포넌트는 suspense 컴포넌트 속에서 사용되어야 하며, suspense는 코드가 로드되는 동안 로딩 화면을 fallback속에 넣어서 보여줄 수 있습니다.

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(()=>import('./Component'));

function MyComponent(){
return (
<div>
<Suspense fallback={<div>loading...</div>}>
<OtherComponent/>
</Suspense>
<div>
);
}

fallback 피하기

import React, { Suspense } from 'react';
import Tabs from './Tabs';
import Glimmer from './Glimmer';

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

function MyComponent() {
  const [tab, setTab] = React.useState('photos');
  
  function handleTabSelect(tab) {
    setTab(tab);
  };

  return (
    <div>
      <Tabs onTabSelect={handleTabSelect} />
      <Suspense fallback={<Glimmer />}>
        {tab === 'photos' ? <Photos /> : <Comments />}
      </Suspense>
    </div>
  );
}

만약 위와 같은 코드가 있다면 Photo가 불러왔을 때 Comments 컴포넌트를 불러오는 것에 대한 고려는 전혀 안 되어 있습니다. 위와 같은 코드에서 tab버튼을 누르게 되면

<Photo>가 사라짐 → <Loading /> 컴포넌트가 생김 → <Comments> 컴포넌트가 생성됨

위와 같은 로직으로 인해서 깜빡임과 같은 현상이 발생할 수 있는데, 이러한 현상은 사용자의 경험에 좋지 않습니다. 이를 위해서 startTransition 함수를 사용할 것을 권장합니다.

function handleTabSelect(tab) {
  startTransition(() => {
    setTab(tab);
  });
};

Error boundaries

해당 컴포넌트로 다른 모듈을 감싸면 네트워크 장애나 오류가 발생할 경우 대체 컴포넌트를 노출 시켜 사용자 경험을 높일 수 있습니다.

Route-based code splitting

코드 분할을 어디에 해야할지 애매하다면 라우트에 하는 것도 좋은 방법입니다.

Named Exports

React.lazy는 현재 default exports만 지원합니다. 다른 이름을 지정해서 사용하고 싶다면 default로 이름을 재정의해서 사용할 수 있습니다.