[JS] ES6문법 : import와 export에 대해서 알아보자.

보통 개발을 하다보면 외부라이브러리든, 직접 만든 라이브러리든 써야하는 경우가 생긴다.

보통 js파일을 가져올 때 아래와 같이 <script>를 이용해서 가져오는 경우가 많았는데,

 

스트립트 태그 이용

2015년 ES6가 공개되면서 ES6 문법인 import와 export를 이용해서 javascript를 모듈화 하는 일이 많아졌다.

지금까지는 나도 저렇게 사용했었는데, 이제는 import와 export를 사용해보려 하는 김에 정리해본다.

 

============================================================================

 

export란?

내가 만든 모듈의 함수, 변수, 객체... 여러 타입의 데이터를 다른 모듈에서 사용 할 수 있도록 내보내는 것을 의미한다.

export의 형식으로는 크게 export default와 named default가 있다. 한번 알아보자.

 

1. export default

export default [함수명] or [객체명] or [객체명...]

export default의 가장 큰 특징은 한 파일에 단 하나만 export할 수 있다는 것이다. 예를 들면 아래와 같은 경우는

안된다.

shopList.js

const productObj = {fruit : 6000, computer : 360000, catFood : 25000};
const gamePack = {dragonQuest : 36000, windCountry : 'free'};

export default productObj;
export default gamePack

위처럼 shopList.js라는 파일 하나에 객체를 2개 선언해놓고 export default로 productObj, gamePack 2개를 export

하려고 하면 안된다. 실제로 한번 해보자.

 

shopList.js

shopList.html

이렇게 암만 console에 뿌리려고 해도 아래와 같은 에러가 뜨면서 안된다.

그럼 아래와 같이 export defalut를 하나만 설정해주면?

콘솔 찍힘

이렇게 잘 찍히는 것을 볼 수 있다. 또는 아래와 같이 여러 데이터들을 객체로 묶어서 보낼 수도 있다.

이렇게 productObj, gamePack 2개의 객체를 선언해놓고 export default할 때 객체로 또 묶어도 제대로 실행된다.

어쨌든 export default는 shopList.js라는 파일에 하나만 선언 됬기 때문이다.

 

export default의 특징 중 또 하나는

export default로 export를 하면 import할 때 이름을 아무렇게나 써도 경로만 맞으면 import가 된다는 것이다.

아마 export default로 하면 무조건 export 되는 데이터는 하나이기 때문에 그런거 아닐까? 라는 생각이 든다.

 

2. named export

named export란 export default와는 다르게 하나의 파일에 여러개를 export할 수 있다.

또한 named export로 export한 데이터는 import시 {}로 묶어준다.

named export의 특징으로는 반드시 export한 데이터명과, import할 때의 데이터명이 일치해야 한다는 것이다.

예를 들면 TEXT라고 export하였으면 반드시 TEXT라고 import 해줘야 한다.

하지만 as를 사용하면 import한 데이터명을 바꿀 수 있다. 이미지를 보면

productObj로 named export한 뒤, productObj로 import하고 있고,

gamePack으로 named export한 뒤, as 사용해 new_gamePack으로 데이터명을 변경 한 것을 알 수 있다.

또는 아래와 같이 묶어서 export하고 import를 할 수 도 있다.

이렇게 기본적인 export에 대해서 알아보았다. 그럼 이제 import에 대해서 알아보자.

 

import란?

모듈에서 export한 함수, 변수, 객체... 여러 타입의 데이터를 가져 올 때 사용한다.

위의 export에서 봤으니, 그냥 문법만 살펴보자.

 

import [import 할 데이터명] from './파일';
import gamePack from './shopList.js'; -- 샘플1
import {productObj, gamePack} from './shopList.js'; --샘플2

이렇게 샘플1 처럼 하나를 import할 수도 있고, {}로 묶어서 가져오고 싶은 데이터를 import할 수 있다.

근데 만약 전부 import하고 싶다면? 

star import를 사용하면 된다. 거창한 건 아니고 그냥 * 를 입력해주면 된다. 아래를 보자

import * as [내가 원하는 데이터명] from './경로/파일';
import * as starimport from './shopList.js'; -- 샘플3

이렇게 샘플3과 같이 star import를 하면 shopList.js에서 export한 모든 데이터를 가져온다.

star import

star import는 모든 데이터를 import해오기 때문에 반드시 as로 데이터명을 명시해줘야 한다.

해주지 않으면 에러가 발생한다.

 

이렇게 import와 export에 대해서 간단히 알아보려고 했는데, 이미지 때문에 또 글이 길어졌다.

이제 이 import와 export를 활용한 웹팩 환경으로 개발공부를 해봐야지.