[React] 동적임포트를 이용해서 간단한 TodoList만들어보기

안녕하세요!
지난시간에 CRA개발환경을 준비해봤습니다.

이번 포스팅에서는 간단한 TodoList를 만들어보며 , 동적임포트를 구현해보겠습니다.
먼저 동적 임포트를 구현하는 이유는 사용자가 어떤 액션으로 요청을 했을 때, 필요한 JS파일만 내려줄 수 있기 때문입니다.

(지금처럼 작은규모 예제에서는 원래 필요없습니다.)
동적임포트를 하지 않으면 페이지 로딩시에 모든 파일을 다운받게 됩니다.

페이지가 무거워질 수록 동적임포트를 이용한 코드분할이 필요해집니다.

간단한 TodoList를 만들어보겠습니다.

모든 코드는 src폴더에 작성합니다.

1. Todo.js 생성

import React from "react";

export function Todo ({title}) {  
  return (
    {title}
  )
}

2. TodoList.js생성

import React, { Component } from "react";

export default class TodoList extends Component {
    state = {
        todos : []
    }
    onClick = () => {
        import('./Todo').then(({Todo})=>{
            const {todos} = this.state;
            const position = todos.length +1;
            const newTodo = <Todo key={position} title={`할일 ${position}`} />
            this.setState({todos:[...todos,newTodo]})
        })
    }
    render() {
        const {todos} = this.state;
        return (
            <div>
                <button onClick={this.onClick}>할 일 추가</button>
                {todos}
            </div>
        )
    }
}

3. App.js 수정

import React from 'react';
import './App.css';
import TodoList from './TodoList'

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

export default App;

App.js는 가장 최상위 컴포넌트입니다 여기에 TodoList를 가지고있고
TodoList는 내부에 todos라는 Todo컴포넌트의 배열을 상탯값으로 가지고있습니다.
클릭하는 횟수만큼 Todo컴포넌트가 TodoList컴포넌트의 상태값에 추가되기 때문에 TodoList는 클릭시마다 업데이트되어 화면에 나타납니다.

import('./Todo') 함수는 Promise객체를 반환합니다!

기본적인 문법에 관해서는 React공식문서:주요개념을 참고해주세요

npm start

1. 콘솔창에 입력해 실행하면 화면이 뜹니다.
2. 크롬 F12를 눌러 개발자 모드를 보겠습니다.
3. Network탭으로 이동한 뒤 버튼을 클릭합니다.
4. 클릭하면 {숫자}.{hash값}.chunk.js 라는 파일이 다운로드됩니다.

동적으로 임포트하도록 코딩했기 때문에 클릭시에 필요한 파일을 import하면서 다운로드합니다.
Todo.js가 별도의 JS파일로 구현된 것입니다.
첫 1회만 다운로드하게 됩니다.

언제 쓰일까 생각해보겠습니다.
가벼운 웹서비스를 한다면 필요가 없겠지만 어떤 홈페이지가 있고, 일부 사용자만 사용하는 무거운 A라는 기능이 있습니다.

기능을 사용하지 않는 방문객은 A라는 기능을 하기위한 큰 데이터를 다운로드할 필요가 없습니다.
기능을 사용하는 사용자에게만 이벤트 발생시 다운로드 하게 할 때 사용할 수 있을 것 같습니다.

단일페이지앱(Single Page Application)을 만든다면 react-router-dom이라는 라우팅 기능을 지원하는 외부모듈을 이용해 페이지단위로 코드분할을 적용할 수 있습니다.

react-router-dom에 대해서는 따로 포스팅하겠습니다.

▼클릭 시 추가되는 모습

읽어주셔서 감사합니다!