[스터디 with 실전 리액트 프로그래밍] 3편 - 다이나믹하게 import

실전 리액트 프로그래밍

코드를 분할하면, 한번에 내려받는 양을 줄여주고 이는 첫 페이지의 렌더링 시간 단축으로 이어진다. Dynamic import는 코드를 분할하는 하나의 방법이다.

import - JavaScript | MDN

 

 

클릭시 컴포넌트가 추가되는 간단한 웹이다.

Todo 컴포넌트를 하나 만든다.

// Todo.js

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

 

먼저 그냥(static) import 해보자.

버튼을 누르면 Todo 컴포넌트가 추가되게끔 App.js 를 만들었다.

// App.js

import { useState } from 'react'
import Todo from './Todo';

function App() {
  const [todos, setTodos] = useState([])
  const addTodo = () => {
    const position = todos.length + 1
    const newTodo = <Todo key={position} title={`Todo: ${position}`} />
    setTodos([...todos, newTodo])
  }
  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      {todos}
    </div>
  );
}

export default App;

 

npm start로 실행시킨 뒤 개발자 도구로 분석해보자.

static import

버튼을 클릭해 Todo 컴포넌트틀 추가해도 Todo.js파일을 새로 받아오진 않는다. 처음에 이미 받아졌기 때문이다.

 

 

이번에는 App.js에서 Todo.js를 dynamic import 해보자.

dynamic import할 때는 import가 함수로 동작하고, 반환값이 promise여서 then이나 await를 사용해야한다.

 

Todo.js를 default로 export해서 then안에서 이런식으로 처리해야한다.

만약에 export function Todo 했으면 then({Todo} => 로 바로 파라미터를 컴포넌트로 사용할 수 있다.

import { useState } from 'react'

function App() {
  const [todos, setTodos] = useState([])
  const addTodo = () => {
    import('./Todo').then((module) => {
      const { default: Todo } = module
      const position = todos.length + 1
      const newTodo = <Todo key={position} title={`Todo: ${position}`} />
      setTodos([...todos, newTodo])
    })
  }
  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      {todos}
    </div>
  );
}

export default App;

똑같이 npm start 해보자

dynamic import

아까와 다르게 dynamic하게 import 했기 때문에 버튼을 눌렀을 때, 새로운 js파일이 받아진 것을 확인할 수 있다. 그렇다면 처음에 Todo.js 파일을 받지 않은만큼 시간단축이 되었을 것이다.

 

이후 버튼을 클릭했을 때, 똑같은 파일이 브라우저에 캐싱되어 있으므로 추가로 받아지지 않았다. 따라서 불필요한 렌더링이 줄게 된다. 앞에서 얘기한대로 브라우저 캐싱 효과를 보기 위해선 해당 파일이 변경되었는지 알 수 있어야되고 이 때 해시값이 이용된다. 해시값은 파일이 조금만 수정이 되어도 값 전체가 바뀌기 때문에 내용이 변경되었는지 효과적으로 알 수 있다.