JavaScript 데이터 실습 - Import, Export

JavaScript 파일들은 모듈이라고도 불리며 세가지의 데이터 이동 통로가 있는데 다음과 같다.

 

[입력]

1. Import: 다른 모듈로부터 데이터를 가져올 때 사용하는 통로.

[출력]

1. Default export : 이름을 지정할 필요가 없으며 각 모듈마다 단 한 개 존재한다. 하나의 데이터만 내보낼 수 있다.

2. Named export : 이름을 지정하여 적용한다. 여러 개 존재 가능하다.

Default 내보내기와 Named 내보내기는 동시에 사용할 수 있다.

 

Default 통로

[export]

// 기본형
export default function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

// 이름 생략
export default function (data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

default를 이용하면 통로가 하나이므로 export 시에 이름을 사용하지 않아도 된다.

 

[import]

import _ from 'lodash' // from 'node_moduls'
import getType from './getType' // getType.js
import getRandom from './getRandom' // getRandom.js

console.log(_.camelCase('the hello world'))
console.log(getType([1, 2, 3]))
console.log(getRandom(), getRandom())

import _ from 'lodash'
import checkType from './getType'
import getRandom from './getRandom'

console.log(_.camelCase('the hello world'))
console.log(checkType([1, 2, 3]))
console.log(getRandom(), getRandom())

import 시에도 이름을 다르게 지정해도 된다. (getType을 checkType으로 변경해도 이상 없음)

 

Named 통로

[export]

// test.js
export function random() {
  return Math.floor(Math.random() * 10)
}
export const user = {
  name: 'Riam',
  age: 72
}

default 키워드가 빠지고 function에 이름을 기재한다.

 

[import]

// main.js
import { random, user } from './test'

console.log(random())
console.log(user)

객체 구조분해를 할 때 처럼 중괄호를 이용하여 들여온다.

이름 지정방식은 한 모듈에서 여러 개의 데이터를 내보낼 수 있다. 

내보낼 데이터들의 이름을 나열한 뒤 중괄호로 묶어주면 된다.

 

import { random, user as riam } from './test'

console.log(random())
console.log(riam)

꺼내온 데이터를 다른 이름으로 사용하고 싶다면 'as' 키워드를 이용한다.

(객체 구조분해에서는 : 기호를 사용했다.)

 

import * as R from './getRandom'

모듈의 모든 데이터를 한번에 불러올 때는 *(asterisk, 와일드카드, Wildcard Character) 기호를 사용한다.

이 때 as 키워드를 이용해 별칭을 반드시 지어줘야 한다.

Named export와 Default export를 동시에 사용할 때도 *을 활용하여 불러온다.