[JS] Export & Imports (Modules)

 

 

차세대 자바스크립트에는 모듈 방식으로 코드를 작성해 여러 개의 파일로 코드를 분할할 수 있습니다~

사용하는 방법은 !!

코드를 여러 파일로 만들어두고 작동하는 main 파일에 올바른 순서대로 코드를 가져오기만 하면 됩니다

아주 쉽지요!!??

 

파일끼리의 export, import 하는 간단한 코드를 구현해 보았어요

 

person.js

const person = {
	name : 'YuJung'
}

export default person

다른 파일에서 import 할 수 있게 하려면 내보내려는 파일 맨 밑에

default를 붙여 내보낼 수 있습니다

export default에 붙은 값이 기본값입니다!

다른 파일에서 person.js를 import 하면 원하는 대로 객체 이름을 변경할 수 있어요

 

utility.js

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

export const baseData = 10;

여러 개를 export 하는 파일을 만들 수도 있어요

 

app.js

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

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

위에서 만든 두 파일 person.js와 utility.js 파일에서 무언가를 가져오기 위해서는 import 문이 필요해요

person.js 파일을 import 할 때 객체 이름은 개발자가 원하는 이름으로 정할 수가 있어요

하지만 utility.js는 좀 달라요!!!

utility.js 안에는 두 개의 상수가 있는데 특정한 것을 정확하게 가리켜야 하므로 중괄호를 사용합니다  

clean, baseData 붕 어떤 것도 default로 지정되어 있지 않기 때문에 

위의 예시 코드처럼 따로따로 import 할 수도 있고 

import문에 콤마 넣어서 { baseData, clean } 또는 { clean, baseData }라고 한 문장으로 작성할 수도 있습니다~

 

as를 사용해 별칭을 할당할 수도 있어요

import { clean as cleaning } from './utility.js'

또는 파일에 다수의 named export 가 있는 경우에는 특수 문자 *를 사용해서 모든 것을 import 할 수도 있습니다

import * as bundled from './utility.js'