ES6 Import & Export
들어가기 앞서
JS에서 import, export하는 방법이 다양하다. 무엇인지 알고 사용해보자
Export named
- 선언한 함수 이름과 동일해야 작동함
- 변경하고 싶으면, as를 추가하면 됨
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;import { plus } from './math';
import { plus as add } from './math';Export default
- 파일 전체를 한번에 export하고 싶을 때
- 하나의 파일에서 두개이상 export default가 존재 할 수 없다.
- import시 object 이름을 자유롭게 설정 가능
const plus = (a, b) => a + b;
const minus = (a, b) => a - b;
export default { plus, minus }import math from './math';
math.plus(2, 6);
import calc from './math';
calc.plus(2, 6);Default export + named export
- default export는 하나만 존재해야 한다.
- named export는 여러개 존재할 수 있다.
export const plus = (a, b) => a + b;
const minus = (a, b) => a - b;
export default minus;Import star
- default export가 없는 파일에서 모든 named export를 import하고 싶을 때
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;import * as calc from './math';
calc.plus(2,1);Loading 속도 빠르게 하기
- named export를 이용하여 필요한 것만 import함
- dynamic import를 이용하여 필요할때만 로딩함
const handleClick = (e) => {
import('./math')
.then(math => math.plus(2, e.target.value))
.catch(e => console.error(e));
}