[JavaScript] Exports & Imports

자바스크립트에서 쓰이는 Exports와 Imports에 대해 알아봅시다.

1. 소개

Exports와 Imports는 자바스크립트 코드를 여러 개의 파일로 구분하고 필요한 곳에 가져오는 모듈화를 할 때 사용됩니다.

2. default exports

객체 하나를 기본 값으로 내보내는 것을 default exports라고 한다.

const person = {
  name: 'summer'
}

export default person

import 방식

위 코드 (person.js)와 같이 person이라는 기본 값만 내보내는 경우 default를 사용한다.

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

위 코드 (app.js)에서 person.js를 가져올 경우 person, prs처럼 객체 이름을 원하는 대로 정할 수 있다.

3. named exports

default로 기본 값이 정해져 있지 않은 객체를 불러올 때 이름을 사용하는 것을 named exports라고 한다.

export const clean = () => {}
export const dataBase = 10;

위 코드 (utility.js)는 clean과 dataBase라는 두 상수를 내보내고 있다.

import 방식

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

1. app.js에서 객체 불러올 때 특정한 것을 가리키기 위하여 중괄호를 사용한다.

import {clean, dataBase} from './utility.js'

2. 중괄호 안에 여러 객체를 나열하여 불러올 수 있다.

import {database as dataBase} from './utility.js'

3. as를 사용하여 객체에 별칭을 지정할 수 있다.

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

4. *을 사용하여 모든 객체를 불러올 수 있다.
   이 때 bundled.clean, bundled.dataBase와 같이 사용한다.