동적 임포트(Dynamic Import)

gigi·2022년 7월 5일

코드분할

코드분할을 이용하면 사용자에게 필요한 양의 코드만 내려줄 수 있다. 코드분할을 사용하지 않으면 전체 코드를 한 번에 내려주기 때문에 첫 페이지가 뜨는 시간이 오래걸린다. 코드를 분할하는 방법 중 하나는 동적 임포트를 이용하는 것이다.

보통 우리가 사용하는 import와 export는 모두 정적인 방식이며, 문법이 단순하고 제약사항이 있다.

1. import문에 동적 매개변수를 사용할 수 없다.

모듈 경로에는 원시 문자열만 들어갈 수 있기 때문에 함수 호출 결과값을 경로로 쓰는 것이 불가능하다.

 import ... from getModule(); // 에러 발생

2. 런타임이나 조건부로 모듈을 불러올 수 없다.

if(...) {
        import ...; // 에러 발생
    }

이러한 이유는 Import / export는 코드 구조의 중심을 잡아주는 역할이기 때문이다. 코드 구조를 분석해 모듈을 한데 모아 번들링하고, 사용하지 않는 모듈은 제거해야 하는데, 코드 구조가 간단하고 고정되어 있을 때에만 위와 같은 역할을 할 수 있다.

동적 임포트의 장점

동적 임포트를 사용하면 import문에 변수 설정을 할 수 있다.
필요한 경우에만 사용할 수 있다.
async/await 사용하여 동적으로 모듈을 가져오는 것을 통해, 불필요한 리소스 사용을 줄일 수 있다.
코드의 가독성과 유지보수의 편의성

불필요한 리소스를 줄이는 것보다 큰 기대효과를 가진다.

정적 임포트를 사용한다면, 필요한 모듈들을 전부 import문을 사용해서 가져와야 하고, 최상단 import코드가 굉장히 길어지고 복잡해 질 수 있다.

API를 하나 더 추가해야하는 상황이라면, 최상단의 import 코드만 길어진다. 하지만 동적 import를 사용한다면 설정값만 변경하면 되기 때문에 효울적으로 코드를 짤 수 있다.
(import 경로에 함수 호출 결과값을 사용할 수 있기 때문)

동적 임포트 사용하기

Todo.js 파일 생성

// Todo.js
import React from 'react';

export function Todo({ title }) {
  return <div>{title}</div>
}

TodoList.js 파일 생성

// Todo.js
import React, { useState } from "react";

export function TodoList({ title }) {
  const [todos, setTodos] = useState([]);

  const addTodo = () => {
    import("./Todo.js").then(({ Todo }) => {
      const position = todos.length + 1;
      const newTodo = <Todo key={position} title={`할 일 ${position}`} />;
      setTodos([...todos, newTodo]);
    });
  };
  return (
    <div>
      <button onClick={addTodo}>할 일 추가</button>
      {todos} 
    </div>
  );
}

export default TodoList;

App.js 파일에 TodoList 컴포넌트 추가

import React from "react";
import TodoList from "./TodoList";

function App() {
  return (
    <div>
      <TodoList />
    </div>
  );
}

export default App;

코드 실행

npm start

Todo.js 파일이 비동기로 전송되는지 확인하기 위해 브라우저의 개발자 모드를 켜고 네트워크 탭을 열어본다. 할 일 추가 버튼을 클릭하면 {숫자}.chunk.js 파일을 받아 오는 것을 확인할 수 있다. 화면에는 할 일 목록이 하나 추가 되며 이후 버튼을 클릭하면 더이상 파일을 받아오지 않고 할 일 목록은 계속해서 추가 된다.

빌드 명령어 실행

npm run build

build/static/js 폴더 밑에 {숫자}.{해시값}.chunk.js 파일이 추가된 것을 확인할 수 있다. 배포 환경에서 브라우저 캐싱 효과를 보기위해 파일 이름에 해시값이 추가됐다. Todo.js 파일은 별도의 자바스크립트 파일로 분리되었고, 필요한 경우에만 내려받도록 구현됐다.

단일 페이지 애플리케이션을 만들기 위해 react-router-dom 패키지를 이용하는 경우에는 react-router-dom에서 지원하는 기능을 이용해서 페이지 단위로 코드 분할을 적용 할 수 있다.

gigi

다음 포스트