Exports & Imports (Modules)

차세대 자바스크립트에서는 모듈 방식의 코드를 작성할 수 있다.
여러 개의 파일로 코드 분할 가능하므로 코드를 여러 파일로 나눠 작업 후, html 파일에 코드를 가져오면 된다.

내보내기(export)

파일을 내보내는 데는 두 가지 방법이 있다.

1. export default 상수명

export default 상수명

//📍 person.js

//상수형의 person에는 객체가 들어있음
const person = {
  name: "Euna"
}

export default person;

2. export 상수명

export 상수명

//📍 utility.js

//상수형의 clean에는 함수가 들어있음
export const clean = () => {};

//상수형의 baseData에는 숫자가 들어있음
export const baseData = 10;

가져오기(import)

내보낸 person 객체와 clean 함수, baseData를 app.js 파일에서 가져와 보자.

1. default로 내보낸(export) 경우: default export(기본값 불러오기)

default로 내보낸 파일을 가져올(import) 때는 항상 default로 표시한 것을 참조하여 그 값을 기본값으로 가져온다.

• 따라서 export default person으로 내보낸 person객체를 다른 파일에서 가져올 때는 const person을 기본값으로 가져온다.
• 어떤 이름으로 가져오든지 const person이 기본값으로 가져와지기 때문에 객체의 이름을 마음대로 설정할 수 있다.
  • 예) 아래 person, prs 둘 다 const person을 기본값으로 가진다.
    import person from './person.js'
    import prs from './person.js'

//📍 person.js 에서 default로 내보내기
const person = {
  name: "Euna"
}

export default person;


//📍 app.js 에서 가져오기
import person from './person.js'
import prs from './person.js'

2. 그냥 export한 경우: named export(이름으로 불러오기)

두 개의 다른 상수를 불러오는데, 그 파일에서 특정한 어떤 것을 정확히 가리키기 위해 중괄호{}를 사용하여 입력해야 한다.

• 따라서 내보낸 이름 그대로, 가져오는 파일에서 {} 중괄호를 사용하여 가져와야 한다.

//📍 utility.js 에서 내보내기
export const clean = () => {};
export const baseData = 10;


//📍 app.js 에서 가져오기
import { baseData } from './utility.js'
import { clean } from './utility.js'

//📚 같은 파일에서 가져올 경우 아래 처럼 , 를 사용하여 함께 가져 올 수도 있다.
import { baseData, clean } from './utility.js'

📚 정리

//📍 app.js

//1. default로 내보낸 경우
//📚 같은 값을 참조하기 때문에 아래 처럼 모듈 이름을 원하는 대로 설정할 수 있다.
import person from './person.js'
import prs from './person.js'


//2. 이름으로 내보낸 경우
//📚 내보낸 이름 그대로 {} 중괄호를 사용하여 모듈을 가져와야 한다.
import { baseData } from './utility.js'
import { clean } from './utility.js'


//📚 같은 파일에서 가져올 경우 아래 처럼 , 를 사용하여 모듈을 함께 가져 올 수도 있다.
import { baseData, clean } from './utility.js'


//📚 굳이 이름을 바꾸고 싶다면, as를 사용하여 모듈 이름을 바꿀 수 있다.
import { baseData as 바꿀이름1, clean as 바꿀이름2 } from './utility.js'


//📚 다수의 named export 한번에 가져오려면 *를 사용하면 된다.
import * as bundle from './utility.js'
//... 번들에 있는것을 사용하려면 bundle.baseData, bundled.clean 이런 식으로 접근하면 된다.

그런데 차세대 자바스크립트 모듈 기능이 모든 브라우저에서 정상적으로 작동하지 않을 수도 있다.
따라서 현재 버전의 자바스크립트 기능으로 컴파일하는 프로젝트 셋업이 필요하다.