일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 클라우드
- k8s
- 백엔드
- HTML
- AWS
- CSS
- 파이썬
- 타입스크립트
- 알고리즘
- 리액트
- next.js
- es6
- 솔리디티
- TypeScript
- 블록체인
- 자바스크립트
- node.js
- docker
- BFS
- 웹
- 이더리움
- 백준
- JavaScript
- 컴퓨터공학
- 가상화
- 프론트엔드
- kubernetes
- react
- 이슈
- 쿠버네티스
- Today
- Total
즐겁게, 코드
동적으로 모듈 불러오기 본문
// utils.js
const sayHello = () => {
console.log("안녕하세요!");
};
const sayNothing = () => {
console.log("...");
};
export { sayHello, sayNothing };
import { sayHello, sayNothing } from "./utils.js"
자주 보셨을 import-export
구문입니다.
그런데 조건에 따라 모듈을 불러오는 것도 가능할까요?
// Error!!!
if(person === "friend") {
import { sayHello } from "./utils.js";
sayHello();
}
else if(person === "professor") {
import { sayNothing } from "./utils.js";
sayNothing();
}
물론 이렇게 사용하면 오류가 출력됩니다.
코드를 짜다 보면 버튼을 눌렀을 때만 외부 함수를 호출하는 경우 등 특정 조건에 따라서 불러와야 하는 모듈이 있을 수도 있을 수 있는데요, 오늘은 필요할 때만 동적으로 모듈을 불러오는 방법을 소개하도록 하겠습니다.
import 함수
import("./utils.js");
어딘가 낯선 모습입니다. import
를 함수 형태로 사용하면 인자로 받은 모듈을 불러온 후 이행(resolve) 객체로 모듈을 갖는 프라미스를 리턴하는데요, 이행 객체를 콘솔에 찍어보면 확실히 모듈을 불러왔음을 알 수 있습니다.
import("./utils.js").then((res) => console.log(res));
Module {Symbol(Symbol.toStringTag): "Module"}
sayHello: (...)
sayNothing: (...)
Symbol(Symbol.toStringTag): "Module"
get sayHello: ƒ ()
set sayHello: ƒ ()
get sayNothing: ƒ ()
set sayNothing: ƒ ()
따라서 아래처럼 외부 모듈의 함수를 호출할 수 있게 됩니다.
import("./utils.js").then((res) => res.sayHello()) // 안녕하세요!
기본값 내보내기(export default
) 도 유사합니다. 다만, 내보내기 기본값은 이행 객체에서 default
라는 이름의 프로퍼티로 존재합니다.
// utils.js
const sayHello = () => {
console.log("안녕하세요!");
};
const sayNothing = () => {
console.log("...");
};
const defaultSay = () => {
console.log("좋은 하루 보내세요!");
};
export { sayHello, sayNothing };
export default defaultSay;
Module {Symbol(Symbol.toStringTag): "Module"}
default: (...) // export default로 내보낸 함수
sayHello: (...)
sayNothing: (...)
Symbol(Symbol.toStringTag): "Module"
get default: ƒ ()
set default: ƒ ()
get sayHello: ƒ ()
set sayHello: ƒ ()
get sayNothing: ƒ ()
set sayNothing: ƒ ()
import("./utils.js").then((res) => res.default()) // 좋은 하루 보내세요!
async-await과 함께 사용하기
프라미스 형태로 사용할 수 있다면 async-await
을 사용하도록 고치는 것도 얼마든지 가능합니다.
const load = async () => {
// 모듈 객체에 대해 분해 할당을 사용한 모습입니다.
const { sayHello } = await import("./utils.js");
sayHello();
}
결론
지금까지 조건에 따라 동적으로 외부 모듈을 불러와 활용하는 방법을 알아보았습니다.
if(person === "friend") {
import("./utils.js").then((res) => res.sayHello()) // 안녕하세요!
}
else if(person == "professor") {
import("./utils.js").then((res) => res.default()) // 좋은 하루 보내세요!
}
else {
// 이 분기에서는 utils.js 모듈을 로드하지 않습니다.
console.log("누구지?")
}
이 방법은 리액트의 "코드 스플리팅" 이라는 기법의 원리인데요, 오늘 배운 내용을 어떻게 실제로 유용하게 사용할 수 있는지 소개하는 시간도 가져보도록 하겠습니다.
TL;DR
- 동적 불러오기를 활용하면 조건에 따라 필요할 때만 모듈을 불러올 수 있다. (네트워크 성능 이득)
- import 를 함수로 사용하면 인자로 받은 모듈을 이행 객체로 갖는 프라미스를 반환한다.
- export default
로 내보낸 요소는 default 프로퍼티로 접근할 수 있다.
'💬 언어 > Javascript' 카테고리의 다른 글
변수의 호이스팅, 그리고 TDZ의 함정 (0) | 2021.04.11 |
---|---|
제너레이터부터 리덕스 사가까지 - 01. 제너레이터 (0) | 2021.04.05 |
requestAnimationFrame 으로 애니메이션 구현하기 (0) | 2021.02.23 |
find, some 메서드로 배열 검사하기 (0) | 2021.02.21 |
콜 스택과 이벤트 루프 (0) | 2021.02.20 |