Export & Import

Javascript/vanilla

서앶인 2022. 4. 2. 21:17

차세대 Javascript의 모듈식 코드 작성법 Export & Import

📌Javascript module 가져오기

// person.js

const person = {
	name: 'Max'
}

export default person

- default 구문을 사용하여 person 객체를 기본 내보내기

- 기본 내보내기(default)는 어떤 이름으로도 Import 해올 수 있다.

// utility.js

export const clean = () => {...}
export const baseData = 10

- 각각에 export를 달아 각 모듈을 이름 내보내기

- 정의한 이름으로 Import 해올 수 있다.

// app.js

import person from './person.js'
import prs from './person.js'

import { clean } from './utility.js'
import { baseData } from 'utility.js'

- default로 기본 내보내기한 모듈은 다양한 이름으로 Import가 가능하다. ( 언제나 person 객체만 참조🔥 )

- 하나씩 내보내기된 모듈은 정의된 이름으로 Import가 가능하다. ( 중괄호로 선언 )

// app.js

import { cl as clean } from './utility.js'
import * as bundled from './utility.js'

- 이름 내보내기 모듈은 as 를 사용하여 Import해올 수 있는데,

👉 clean 모듈을 cl 이라는 새로운 이름으로 정의한다.

👉 * 를 사용하여 utility.js 파일 안의 모든 export 모듈을 Import한다. ( bundled.baseData / bundled.clean 으로 사용 )

📌 추가 참고