자바스크립트 + 리액트 디자인 패턴

56

자바스크립트 + 리액트 디자인 패턴

동적 가져오기는

await

와 함께 사용할 수 있습니다.

let module = await import("/modules/cakeFactory.js");

동적 가져오기를 사용하면 모듈이 사용될 때만 다운로드되고 실행됩니다.

사용자 상호작용

Interaction

에 반응하거나 화면에 보이면

Visibility

실행하기 등 자주 사용되는 패턴

은 동적 가져오기를 통해 바닐라 자바스크립트에서도 쉽게 구현할 수 있습니다.

5.6.1

사용자 상호작용에 따라 가져오기

일부 기능은 사용자가 상호작용할 때만 필요할 수도 있습니다. 채팅 창이나 다이얼로그, 비

디오 등이 대표적인 예시입니다. 이런 기능은 페이지 로드 시점에 필요한 게 아니니 사용자

가 컴포넌트를 클릭하는 등 상호작용에 따라 로드되는 것이 좋습니다. 동적 가져오기를 활용

하면, 실행한 다음에 따라오는 함수를 통해 원하는 기능을 사용할 수 있습니다.

다음 예시는

lodash

.

sortby

모듈

12

을 동적으로 로드하여 정렬 기능을 구현하는 코드입

니다.

const btn = document.querySelector('button');

btn.addEventListener('click', e => {

e.preventDefault();

import('lodash.sortby')

.then(module ...