JS 모듈 : Default Export와 Named Export의 차이점

default export와 named export는 JavaScript 모듈 시스템에서 모듈을 내보내는 두 가지 방법으로,  그 동안 큰 문제를 겪진 않았지만 코드를 꼼꼼히 보는 습관을 가지려고 노력하는 과정에서 정리하게 되었다. 

Default Export

• 'Default', 즉 기본값 이라는 뜻으로 주된 기능이나 객체를 대표값 으로 설정한다는 의미에서 붙여진 export 방식으로, 가장 흔히 사용되는 값(예: 주요 클래스나 함수)을 모듈의 기본값으로 설정할 때 적합하다.
• 한 모듈당 하나의 default export만 허용되는 특징이 있다. 그렇기에 임의의 이름으로 모듈을 가져올 수 있다.

// module.js
const add = (a, b) => a + b;
export default add;

// main.js
import sum from './module.js';
console.log(sum(2, 3));

Named Export

• 모듈 내부의 값들(함수, 변수 등)을 직접 이름을 지정해 내보낸다는 의미에서 붙여진 export 방식으로, Default Export과 다르게 모듈에서 여러 개의 값(함수, 변수 등)을 내보낼 수 있다. 그렇기에 혼동을 줄이기 위해 모듈을 가져올 때 반드시 내보낸 이름과 동일한 이름으로 가져와야 한다. (단, as 키워드를 사용해 별칭으로 변경 가능)

// module.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './module.js';
console.log(add(2, 3));       
console.log(subtract(5, 2));  

// 별칭 사용 예시 
import { add as sum } from './module.js';
console.log(sum(2, 3));

 

정리

 그 동안 공부했던 어려운 개념은 아니었지만, 예시를 보면 확인할 수 있듯이 import하여 가져오는 방식도 다르다. (중괄호의 유무) 
주요 함수나 클래스에 대해서 내보낼 때는 default export 방식을, 여러 함수, 변수, 또는 클래스를 내보내야할 때는 Named Export를 추천한다