ES6 export 와 import

export(내보내기)

Javascript 내부에서 객체, 함수, 원시 값을 내보낼때 사용한다.

외부에서 import를 통해 불러온다.

 

export 방식에는 Named와 default 방식이 있다.

 

named export 방식

export const obo = 'obo';
export const oboArray = [1,2,3,4];
export function oboFunction() {};

export {obo, oboArray, oboFunction}; //동시에 선언

 

named export 방식으로 사용하면 import 하는곳에서 위에 선언된 이름을 사용해야한다.

다른이름을 사용하기 위해선 as 라는 키워드를 사용해서 변경이 가능하다.

export const obo = 'obo';
export const oboArray = [1,2,3,4];
export function oboFunction() {};

export {obo, oboArray, oboFunction as oboFunc, obo as o}; //as 키워드를 사용해 이름변경 가능

 

default export 방식

default export를 선언할땐 모듈 당 한개만 선언이 가능하다. 

* 주의할점 : default export는 const, let, var과 함께 선언하지 못한다.

export const obo = 'obo';
export const oboArray = [1,2,3,4];
function oboFunction() {};

export default oboFunction;
또는
export {oboFunction as default, obo, oboArray}; // 다른 객체와 같이 동시에 선언

 

import(불러오기)

import를 사용하여 외부 스크립트에서 export 를 선언한 객체를 가져올 수 있다.

 

named export 방식의 import

import {obo, oboArray} from './export' // 각각 선언
import * as t from './export' //동시에 선언

console.log(t.obo);
console.log(t.oboArray.length);

 

default export 방식의 import

import oboFunction from './export'
import oboFunction, {obo, oboArray} from './export'

 

import를 사용하여 불러올때 named export 방식은 import 할때 {} 중괄호가 필수이며,

default export 방식은 {} 중괄호가 필요없다.