[JavaScript] 예제로 보는 ESM 문법

ESM 문법을 익히기 위해 모듈을 내보내고 가져오는 코드를 예시로 사용한다.

 

// file1.js 
export default function func1(){}
export function func2(){}
export const var1 = 123;
export let var2 = 'hello';

//file2.js
import myFunc1, { func2, var1, var2 } from './file1.js';

//file3.js
import { func2 as myFunc2 } from './file1.js';

ESM 문법 특징

1. 코드를 내보낼 때는 export 사용
2. 코드를 가져오는 쪽에서는 import, from 사용
3. default 키워드는 한 파일에서 한 번만 사용 가능
4. default 키워드로 내보내진 코드는 괄호 없이 가져올 수 있고, 이름은 원하는 대로 정할 수 있음
5. default 키워드 없이 내보내진 코드는 괄호를 사용해서 가져옴 (단, 원한다면 as 키워드를 이용해서 이름 변경 가능)

출처 : 리액트 실전 프로그래밍 도서