#TIL22

가져오기, 내보내기

• js 확장자로 끝나는 자바스크립트 파일에서는 외부에 있는 자바스크립트 파일을 import 키워드로 가지고 올 수 있고 또는 특정 내용을 export 키워드를 통해 자바스크립트 파일 내부에서 외부로 내보내기 할 수 있음

• 자바스크립트 파일은 그 안에있는 특정 내용을 밖으로 내보낼 수 있는 2개의 통로를 가지고 있음

1. Default export

• 첫 번째, Default export 라는 이름을 따로 지정하지 않아도 되는 기본통로
• 이름을 지정할 필요가 없는 통로를 사용할 때는 export 키워드와 함께 default 키워드를 사용
• 기본통로로 나가는 데이터는 그 데이터에 따로 이름을 지정할 필요 없음
• 기본통로는 하나의 파일에서 하나의 데이터만 내보내기 가능

<getType.js>
export default function (data) {
return Object.prototype.toString.call(data).slice(8,-1);
};

<getRandom.js>
export default function () {
return Math.floor(Math.random() * 10)
}

<main.js>
import getType from './getType.js'
import getRandom from './getRandom.js'

또는
import checkType from './getType.js'
import random from './getRandom.js'

• 기본통로(default)로 빠져나가는 데이터는 가지고와서 활용할 때 원하는 이름으로 지정 가능

console.log(getType([1, 2, 3])) //Array
console.log(getRandom(), getRandom()) //2 8

2. Named export

• 이름을 꼭 지정해야 되는 통로
• 이름을 지정해야 되는 통로로 내보내는 데이터는 이름만 지정되어 있으면 개수 제한이 없음
• 이름이 지정된 통로로 나오는 데이터의 경우 가져올 때 데이터를 중괄호{}로 묶어서 사용
• 구조 분해 할당 문법과 유사

<getRandom.js>
export function random() {
return Math.floor(Math.random() * 10)
}
export const user = {
name: 'hyerin',
age: 95
}

• 해당 파일에서 user라는 이름으로 새로운 데이터를 밖으로 내보내기

<main.js>
import {random, user} from './getRandom.js'
console.log(random(), random()) //2 8
console.log(user) //{name: "hyerin", age: 95}

다른 이름으로 변경하여 사용하기(as)

• 객체 구조 분해에서는 추출한 하나의 데이터 이름이 마음에 들지 않으면 뒤쪽에 콜론기호:를 통해 원하는 다른 이름으로 변경 가능
• import 문법에서는 콜론기호 대신 as 키워드로 활용할 이름 지정
• as 뒤쪽의 이름은 마음대로 지정 가능

<main.js>
import {random, user as hyerin} from './getRandom.js'

console.log(random(), random()) //2 8
console.log(hyerin) //{name: "hyerin", age: 95}

한번에 가져오기(＊)

• ＊는 자바스크립트 파일에 들어있는 모든 내보내기 되는 데이터를 의미하며 그것을 ＊로 가지고와서 내가지정한 이름에 할당해서 내부에서 사용 가능
• ＊(asterisk)를 와일드카드라고도 부름
• 와일드카드(Wildcard Character, ＊)는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킴
• 의미적으로, 아래와 같이 getRandom이라는 자바스크립트파일에서 모든 export 내용을 가지고와서 R이라는 내가지정한이름에 변수에 할당해서 내부적으로 사용하는 개념

<main.js>
import ＊ as R from './getRandom.js'
console.log(R)

Named export, Default export 모두 사용하기

• 하나의 자바스크립트 파일에서 두개의 통로를 모두 사용할 수 있음
• 즉, 이름을 지정해야 되는 내보내기와 기본 내보내기를 같이 쓸 수 있음

<getRandom.js>
export default function () {
return Math.floor(Math.random() ＊ 10)
}
export function random() {
return Math.floor(Math.random() ＊ 10)
}
export const user = {
name: 'hyerin',
age: 95
}
export default 123

<main.js>
import ＊ as R from './getRandom.js'
console.log(R)
/＊ Module {Symbol(Symbol.toStringTag): "Module"}
default: 123
random: ƒ random()
user: Object ＊/

정리

• 자바스크립트 파일에서 특정내용을 한번만 내보내기 하면 충분하다고 판단시에는 export default 사용
• 반대로 내보내기를 해야하는 내용이 많다면 이름을 지정해야 하는 통로 사용