안녕하세요!
지난시간에 CRA개발환경을 준비해봤습니다.
이번 포스팅에서는 간단한 TodoList를 만들어보며 , 동적임포트를 구현해보겠습니다.
먼저 동적 임포트를 구현하는 이유는 사용자가 어떤 액션으로 요청을 했을 때, 필요한 JS파일만 내려줄 수 있기 때문입니다.
(지금처럼 작은규모 예제에서는 원래 필요없습니다.)
동적임포트를 하지 않으면 페이지 로딩시에 모든 파일을 다운받게 됩니다.
페이지가 무거워질 수록 동적임포트를 이용한 코드분할이 필요해집니다.
간단한 TodoList를 만들어보겠습니다.
모든 코드는 src폴더에 작성합니다.
- Todo.js 생성
import React from "react";
export function Todo ({title}) {
return (
{title}
)
}
- 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>
)
}
}- 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- 콘솔창에 입력해 실행하면 화면이 뜹니다.
- 크롬 F12를 눌러 개발자 모드를 보겠습니다.
- Network탭으로 이동한 뒤 버튼을 클릭합니다.
- 클릭하면 {숫자}.{hash값}.chunk.js 라는 파일이 다운로드됩니다.
동적으로 임포트하도록 코딩했기 때문에 클릭시에 필요한 파일을 import하면서 다운로드합니다.
Todo.js가 별도의 JS파일로 구현된 것입니다.
첫 1회만 다운로드하게 됩니다.
언제 쓰일까 생각해보겠습니다.
가벼운 웹서비스를 한다면 필요가 없겠지만 어떤 홈페이지가 있고, 일부 사용자만 사용하는 무거운 A라는 기능이 있습니다.
기능을 사용하지 않는 방문객은 A라는 기능을 하기위한 큰 데이터를 다운로드할 필요가 없습니다.
기능을 사용하는 사용자에게만 이벤트 발생시 다운로드 하게 할 때 사용할 수 있을 것 같습니다.
단일페이지앱(Single Page Application)을 만든다면 react-router-dom이라는 라우팅 기능을 지원하는 외부모듈을 이용해 페이지단위로 코드분할을 적용할 수 있습니다.
react-router-dom에 대해서는 따로 포스팅하겠습니다.
▼클릭 시 추가되는 모습
읽어주셔서 감사합니다!
