자바스크립트 모듈 export (default), import, as

import & export 💌

너무 당연한듯 무의식처럼 사용하고있는 import와 export를 이번에 정리하면서 제대로 알고 넘어가기로 했다.

파일을 여러개 분리한 것을 의미하는 모듈(module),
import와 export는 모듈 시스템을 불러오고 내보낼 때 사용하는 지시자이다

import

모듈을 불러올 수 있는 키워드이다.

export

모듈을 내보내는 키워드이다.

---

export 와 export default 비교

먼저 export와 export default 를 비교해보기로 했다.

/* 모듈 내보내기 */
export function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

export 지시자를 사용하여 sayLikeIt 함수를 만들어서 다른 파일에서 불러올 수 있도록 작성하였다.
export 지시자를 사용했을 때는 { } 해당 모듈의 이름을 넣어서 불러올 수 있다.

/* 모듈 불러오기 */
import { sayLikeIt } from "./test";

sayLikeIt("아이유");

여기서 참고할 부분은 export 로 보낸 모듈은 import 할 때 모듈로 만든 변수 또는 함수의 이름을 중괄호로 감싸지 않으면 에러가 발생한다.

export 키워드를 사용하면 여러개의 함수나 변수를 보내는 것도 가능하다.

/* export를 함수마다 사용 */
export function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

export function sayRun(name) {
  console.log(`${name}아 뛰어야 돼 시간이 안 기다려 준대`);
}

하나의 파일에 두 개의 함수를 export 시키고 있다.
이 경우 각각의 함수 앞에 export를 붙이지 않더라도 한번에 export 시킬 수도 있다.

/* export를 한 번만 사용 */
function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

function sayRun(name) {
  console.log(`${name}아 뛰어야 돼 시간이 안 기다려 준대`);
}

export { sayLikeIt, sayRun };

불러와서 사용할 때는 동일하다.

/* export한 함수 불러오기 */
import { sayLikeIt, sayRun } from "./test";

sayLikeIt("아이유");
sayRun("지은");

그렇다면 export default는 어떨까?

export를 붙이는 경우 여러개의 모듈을 한번에 보낼 수도 있지만,
export default는 한번에 하나의 모듈만 보낼 수 있다.
export default를 하나의 파일에서 여러번 사용한다면 Only one default export allowed per module. 라는 에러메시지를 발견할 수 있을 것이다.

export default는 모듈이 하나만 있다는 것을 명시할 수 있다.

/* test.js */
export default function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

현재 하나의 함수만 export default로 내보내고 있다.
export default를 사용한 경우 import 할 때 중괄호를 생략해야 한다.

/* export default 지시자를 사용한 모듈 불러오기 */
import sayLikeIt from "./test";

sayLikeIt("아이유");

모듈이 몇 개 인가요

• 하나의 파일에서 여러개의 모듈을 내보내는 경우 export 키워드를 사용하면 된다.
• 하나의 파일에서 1개만 내보낸다면 export default를 사용할 수도 있다.
• import할 때 export로 내보낸 모듈은 {} 중괄호를 생략할 수 없다.
• import할 때 export default로 내보낸 모듈은 중괄호를 생략해야 한다. (이름이 없어서 import할 때 as 키워드를 쓸 때는 예외)

작명

• export는 작명을 반드시 해야한다.
• export default는 익명 함수와 같이 이름이 없어도 상관없다. (불러올 때 작명해주면 된다.)

앞서 export default의 경우 중괄호를 생략해야 한다고 했는데 이름이 없는 애를 export default 했다면 import 할 때 작명을 해서 사용해야 한다.

export default function (name) {
  console.log(`${name} 참 좋다.`);
}

export default로 익명 함수를 내보냈다면 어떻게 사용할 것인가? 이름이 없는데?

이때는 두가지 방법이 있다.

import sayLikeIt from "./test";

sayLikeIt("아이유");

export default가 하나의 모듈임을 명시해주고 있기 때문에 마음대로 이름을 작명해주어도 된다. 다음처럼 default as 를 쓸 수도 있다.

import { default as sayLikeIt } from "./test";

sayLikeIt("아이유");

이때는 as 키워드로 이름을 만들어줘야 하므로 중괄호를 생략할 수 없다. (as에 대해서는 아래에서 정리)

익명 함수나 클래스를 내보냈을 때 네이밍시 주의! 해당 모듈을 여러 파일에서 import 할 경우 매번 이름을 붙여야 하는데 이때마다 이름이 다르다면 혼란이 생길 수 있으므로 하나의 이름으로 통일하는 것이 좋다.

많은 모듈을 불러오고 싶을 때 🌈

const iu = "아이유";
const jieun = "지은";

function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

function sayRun(name) {
  console.log(`${name}아 뛰어야 돼 시간이 안 기다려 준대`);
}

export { jieun, iu, sayLikeIt, sayRun };

굉장히 많은 변수나 함수를 export 해서 import 하는 경우를 생각해보자. 물론 이 중에서 한 두개만 가져온다면 import { } 를 사용하면 되겠지만, 그냥 모두 다 불러오는 방법은 없을까..? 를 고민해볼 수도 있을 것 같다.
이때 사용할 수 있는 방법으로 import * as 작명 이 있다.

/* import * as 작명으로 모두 불러오기 */
import * as say from "./test";

say.sayRun(say.jieun);
say.sayLikeIt(say.iu);

한번에 불러오기 때문에 어떤 이름으로 불러줄지 작명을 해야한다.
여기서는 say라고 붙였는데 iu나 jieun 변수도 다 불러다쓰고 있어서 적절한 작명은 아닌 것 같긴하다......ㅋㅋ

아무튼 say로 작명했기 때문에 오브젝트 형식으로 접근할 수 있게 된다.

이름 바꿔서 내보내고 불러오기

앞서 살펴본 as 키워드를 사용하면 모듈의 이름을 불러올 때 변경시키거나, 내보낼 때 변경해서 내보낼 수 있다.

/* 내보내기 */
const iu = "아이유";
const jieun = "지은";

function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

function sayRun(name) {
  console.log(`${name}아 뛰어야 돼 시간이 안 기다려 준대`);
}

export { jieun as 지은, iu as 아이유, sayLikeIt, sayRun };

jieun과 iu는 as 키워드를 사용하여 지은, 아이유로 사용할 수 있도록 해보았다.
(예시 코드니까 한글 네임도 괜찮겠지!)

/* 모듈 불러오기 */
import {지은, 아이유, sayRun, sayLikeIt} from "./test";

sayRun(지은);
sayLikeIt(아이유);

as 키워드로 이름을 바꿔서 불러오거나, 가져왔다면 바꾼 이름으로 불러서 사용해야한다.
앞서 내보내기 파일에서 as를 사용해서 jieun은 지은으로, iu는 아이유 로 바꿔보냈기 때문에 import 할 때도 바꾼 이름으로 불러서 사용해야 한다.

만약 export 할 때 as를 사용하지 않았다면 import 할 때 as를 사용할 수도 있다.

// 내보내기
const iu = "아이유";
const jieun = "지은";

function sayLikeIt(name) {
  console.log(`${name} 참 좋다.`);
}

function sayRun(name) {
  console.log(`${name}아 뛰어야 돼 시간이 안 기다려 준대`);
}

export { jieun, iu, sayLikeIt, sayRun };

// 불러오기
import { jieun, iu, sayRun as run, sayLikeIt as likeit } from "./test";

run(jieun);
likeit(iu);

이번엔 함수의 이름을 import 할 때 sayRun은 run으로, sayLikeIt은 likeit으로 변경해보았다.
마찬가지로 as 를 사용해서 이름을 바꿔버렸기 때문에 기존의 sayRun과 sayLikeIt은 사용할 수 없다.
(define되지 않았다고 오류 난다.)

모듈을 다시 내보내는 방법도 있다.
오늘은 import export를 완전히 이해할 목적으로 작성했기 때문에
re-export는 이런게 있구나만 알고 필요할 때 다시 찾아봐야겠다.

간단하게만 re-export 정리를 해보자면

// uAndI.js.js
export default function uAndI(name) {
  console.log(`손 틈새로 비치는 ${name} 참 좋다.`);
}

// celebrity.js
export default function celebrity() {
  console.log("You are my celebrity");
}

uAndI 파일과 celebrity 파일을 각각 import 한다면 어떻게 될까?

// index.js
import celebrity from "./celebrity";
import uAndI from "./uAndI";

uAndI("아이유");
celebrity();

아마 이렇게 import 해서 사용할 것이다.
이때 import 하는 파일의 양이 많다면 import ... import ... import ... 하는 방식으로 계속 늘어날 텐데 특정 모듈을 한번에 묶어주는 파일이 중간에 있다면 비슷한 모듈들 끼리는 {} 에 넣어 불러올 수 있지 않을까?

예를 들면 다음과 같은 방법이다.

// pack.js
export { default as uAndI } from "./uAndI";
export { default as celebrity } from "./celebrity";

pack.js 파일을 만들었다.
이 파일은 여러개의 관련된 모듈을 한번에 담아서 re-export 하는 파일로 사용할 것이다.
여기서 주의할 부분은 export default 를 다시 내보낼 때는 { deafult as 작명 } 으로 작성해야 다시 내보내기를 할 수 있다.

import { celebrity, uAndI } from "./pack";

uAndI("아이유");
celebrity();

아무튼 이렇게 다시 내보내기를 사용하면 import를 한줄 한줄씩 적지 않고 이렇게 묶어서 불러올 수도 있게 된다.

---

참고 자료
코어 자바스크립트 모듈 내보내고 가져오기