가져오기, 내보내기

js로 확장자로 끝나는 JavaScript 파일에서는 외부에 있는 JavaScript 파일을 가져오기(import)를 할 수 있으며, 혹은 그 파일을 내보내기(export)를 할 수 있습니다.

1. 가져오기

import라는 키워드를 통해 외부에 있는 JavaScript 파일을 가져올 수 있는 통로를 열어준다고 생각하면 됩니다.

2. 내보내기

export 키워드를 통해 내부에 있는 내용을 내보낼 수 있습니다. 특히, 이를 통해 2가지 통로를 가지는데 이것이 Default export와 Named export입니다.

2.1 Default export

데이터의 이름을 별도로 지정하지 않아도 되는 기본 통로
기본 통로의 경우, 하나의 모듈에서 하나의 기본 내보내기만 가능합니다.

2.2 Named export

데이터의 이름을 반드시 지정해야 하는 통로
이름을 지정한 통로는 여러 개의 데이터를 함께 내보내기를 할 수 있습니다.

3. 모듈(Module)

JavaScript 파일로 어디선가 사용할 수 있는 구조로 만든 파일을 모듈(Module)이라고 합니다. JavaScript 파일은 언제든지 모듈이 될 수 있습니다.

4. 가져오기, 내보내기 관련 코드 예시

4.1 default 관련 코드 예시

import _ from 'lodash' // From `node_modules`
import getType from './getType' // getType.js
import getRandom from './getRandom' // getRandom.js

기본 통로로 데이터가 빠져나갈 수 있는 구조를 가집니다. 기본 통로로 빠져나가는 데이터는 별도로 이름을 지정할 필요가 없기 때문에 export default 키워드를 사용합니다.

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

4.2 named 관련 코드 예시

이름을 지정한 통로로 나오는 데이터의 경우, 아래와 같이 데이터를 중괄호{}로 묶어서 사용해야 합니다. 또한, 아래 코드처럼 여러 데이터를 함께 내보내기가 가능합니다.

import { random, user } from './getRandom' // getRandom.js

아래 코드는 named export의 예로 이름을 지정한 통로이며, 아래 코드에서 보다시피 default 값은 없으며, function random()으로 기명 함수임을 확인할 수 있습니다.

export function random() {
  return Math.floor(Math.random() * 10)
}

지정한 이름을 현재 파일에서는 다르게 사용하고 싶다면, user as orosy와 같이 as를 사용하여 현재 파일에서는 다르게 사용하기도 가능합니다.

import { random, user as orosy} from './getRandom' // getRandom.js

console.log(orosy)

또한, 이름을 지정한 통로로 나오는 데이터를 한꺼번에 가져오고 싶다면, 아래 코드를 사용하면 됩니다.
여기서 사용한 *을 와일드 카드(Wildcard Character)라고도 하며, 이는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킵니다.

import * as R from './getRandom' // R은 변수 이름이며, 무엇이든 관계 없음

console.log(R)