Today I Learned

매일 배운 것을 정리하며 기록합니다. 리액트 코드 스플리팅에 대해 공부하였습니다.

빌드(bulid)

• JS 파일 안에서 불필요한 코드들을 제거하여 파일 크기를 최소화
• JSX 문법이나 최신 자바스크립트 문법이 원할하게 실행되도록 트랜스파일 작업
• 정적 파일 경로 설정
• 위의 작업들을 웹팩(webpack)이라는 도구가 담당

SplitChunks

• CRA의 기본 웹팩 설정이 적용되는 기능
• node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유 된 파일을 자동으로 분리시켜 캐싱의 효과를 줌
• 별도로 설정하지 않으면 각 컴포넌트에 대한 코드가 모두 한 파일(main)에 저장됨
• 당장 필요하지 않은 컴포넌트 정보도 모두 불러와 파일 크기가 커지는 단점이 있음

1. 코드 비동기 로딩

• SplitChunks의 문제점을 해결해 줄 수 있는 방법
• 자바스크립트 함수, 객체, 컴포넌트를 필요한 시점에 불러와서 사용 가능

1-1. 자바스크립트 함수 비동기 로딩

• 상단에서 import하지 않고 import() 함수 형태로 메서드 안에서 사용하면 파일을 따로 분리시켜서 저장함

• 함수가 필요한 시점에 파일을 불러와서 함수 사용 가능

• import를 함수로 사용하면 Promise를 반환

• 모듈을 default로 내보낸 것은 then메서드로 받은 인자에 default를 참조해야 사용 가능

• ex) 자바스크립트 함수 파일

export default function greeting() {
  alert("Hi, default");
}

export function greeting2() {
  alert("Hi, export");
}

• ex) App.js

import React from "react";

const App = () => {
  const onClick = () => {
    import("./Code Spliting/CodeSpliting").then((result) => result.default());
  };

  const onClick2 = () => {
    import("./Code Spliting/CodeSpliting").then((result) =>
      console.log(result)
    );
  };

  return (
    <>
      <div onClick={onClick}>Click me! This is default version</div>;
      <div onClick={onClick2}>Click me! This is export version</div>;
    </>
  );
};

export default App;

1-2. 컴포넌트 코드 스플리팅 - React.lazy, Suspense

• React.lazy: 코드 스플리팅을 위해 리액트에 내장된 유틸 함수,
  컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해줌

• Suspense: 코드 스플리팅을 위해 리액트에 내장된 컴포넌트,
  코드 스플리팅된 컴포넌트를 로딩하도록 발동시킬 수 있고, 로딩이 끝나지 않을 때 보여 줄 UI를 설정할 수 있음(fallback)

• 서버 사이드 렌더링 하지 않을 때 사용

ex) App.js

import React, { useState, Suspense } from "react";
const Lazy = React.lazy(() => import("./Code Spliting/CodeSpliting"));

const App = () => {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };

  return (
    <div>
      <div onClick={onClick}>Click Me!</div>
      <Suspense fallback={<div>loading...</div>}>
        {visible && <Lazy />}
      </Suspense>
    </div>
  );
};

export default App;

1-3. Loadable Components

• 코드 스플리팅을 편하게 도와주는 서드파티 라이브러리

• 서버 사이드 렌더링 지원

• 렌더링하기 전 필요할 때 스플리팅된 파일 미리 불러오기 기능이 있어 더 좋은 사용자 경험을 제공할 수 있음

• 타임아웃, 로딩 UI 딜레이, 서버 사이드 렌더링 호환등 다양한 기능 제공

• ex) App.js

import React, { useState } from "react";
import loadable from "@loadable/component";
const Lazy = loadable(() => import("./Code Spliting/CodeSpliting"), {
  fallback: <div>loading...</div>,
});

const App = () => {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  const onMouseOver = () => {
    Lazy.preload();
  };

  return (
    <div>
      <div onClick={onClick} onMouseOver={onMouseOver}>
        Click Me!
      </div>
      {visible && <Lazy />}
    </div>
  );
};

export default App;

Reference : 김민준(VELOPERT), 『리액트를 다루는 기술』, 길벗 (2019), p522-536.