[Javascript] Named Export와 Default Export에 대해 알아보자

 

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. 

모듈을 가져올 때 named export와 default export 두 가지 방식이 있는데 어떤 차이가 있는지 알아보자.

 

module이란

모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성되며 크게 두 종류로 나뉜다. 

1. 복수의 함수가 있는 라이브러리 형태의 모듈
2. 개체 하나만 선언되어있는 모듈

모듈에 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다.

 

export default

export default는 해당 모듈엔 단 하나의 개체만 있다.

// user.js
export default class User { // export 옆에 'default'를 추가
  constructor(name) {
    this.name = name;
  }
}

 

이렇게 default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있으며 가져오는 이름을 변경해도 문제가 없다.

// main.js
import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔다. 
import MyUser from './user.js'; // MyUser로 가져와도 에러 없이 동작한다.

new User('John');
new MyUser('John');

 

 

named export

named export는 한 파일 내에서 여러 개의 함수나 클래스를 export 할 수 있다. 

// MyClass.js
export class MyFirstClass { 
  /* ... */
}

export class MySecondClass { 
  /* ... */
}

 

* as를 사용해 한 파일 안에 있는 함수나 클래스를 한꺼번에 import 할 수 있다.

import * as MyComponent from './MyClass'

// MyComponent.MyFirstClass 의 형식으로 써야 한다.

 

중괄호 안에 클래스를 넣어 가져오고 이름을 변경해서 가져오려면 as를 사용해야 한다. 

import { MyFirstClass } from './MyComponent.js'; 

// 이름을 변경해서 가져오려면 as를 사용한다.
import { MyFirstClass as CustomClass } from './MyComponent.js';

 

 

둘 중 어떤 것을 써야 할까?

default export는 모듈 당 하나의 export만 가능하며 유지보수에 유리하고 tree-shaking이 가능하다.

• 웹팩(webpack)과 같은 모던 빌드 툴은 로딩 속도를 높이기 위해 모듈들을 한데 모으는 번들링과 최적화를 수행한다. 이 과정에서 사용하지 않는 리소스가 삭제되기도 한다. 빌드 툴은 실제 사용되는 함수가 무엇인지 파악해, 그렇지 않은 함수는 최종 번들링 결과물에 포함하지 않는다. 이 과정에서 불필요한 코드가 제거되기 때문에 빌드 결과물의 크기가 작아진다. 이런 최적화 과정은 '가지치기(tree-shaking)'라고 한다.
• 어떤 걸 가지고 올지 명시하면 이름을 간결하게 써줄 수 있다. say.sayHi()보다 sayHi()가 더 간결하다.
• 어디서 어떤 게 쓰이는지 명확하기 때문에 코드 구조를 파악하기가 쉬워 리팩토링이나 유지보수에 도움이 된다.

반면 named export는 여러 값을 내보낼 때 유용하다. 모든 코드를 한꺼번에 가져올 수 있지만 필요한 값을 가져올 땐 구체적으로 명시해서 가져오는 것이 좋다. 

 

 

참고자료

https://ko.javascript.info/modules-intro

https://ko.javascript.info/import-export#ref-4122

https://velog.io/@oneook/ES6-Modules-Named-Export-vs-Default-Export

https://medium.com/@_diana_lee/default-export%EC%99%80-named-export-%EC%B0%A8%EC%9D%B4%EC%A0%90-38fa5d7f57d4