'export default function', 왜 쓰는 걸까?

SSAFY에서 개발하면서 import하기 편리하다는 이유로 항상 default로 export해왔다. curly braces를 쓰지 않고 이름만 적어주면 import할 수 있기 때문이다. 코드를 덜 쳐도 되기 때문에 안 쓸 이유가 없었다.
하지만 정말 그 이유밖에 없을까? 문득 궁금해 관련 내용을 정리해 봤다.

export란

export는 모듈을 내보내고 가져오기 위한 지시자다.

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

 

+ 대부분의 스타일 가이드는 export clas나 function 뒤에 세미콜론을 붙이지 말라고 권고하고 있다.

 

또, 선언부와 export가 떨어져 있어도 내보내기를 할 수 있다.

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

 

export default의 기능과 쓰는 이유

모듈을 복수의 함수로도 만들 수 있고, 개체 하나만 선언할 수도 있지만, 리팩토링과 유지보수에 좋은 두 번째 방식으로 함수, 클래스, 변수 등의 개체를 모듈 안에 구현하는 것이 좋다.

 

이런 배경에서 export default는 '해당 모듈엔 개체가 하나만 있다'는 사실을 명확히 나타내주는 export 방식이다. 또, 앞서 언급했듯 import할 때 중괄호 없이 가져올 수 있다는 장점도 있다.

 

논쟁들

export default는 절대 정답은 아니다. 네이밍을 제멋대로 할 수 있다는 점, 번들 사이즈가 더 크다는 점을 들어 named export를 쓰자고 주장하는 경우도 많다. GitHub에서도 관련 논의가 있었으니 읽어 보면 양쪽의 입장을 이해할 수 있다.

 

https://yceffort.kr/2020/11/avoid-default-export

Home

 

https://github.com/airbnb/javascript/issues/1365

What is the benefit of prefer-default-export? · Issue #1365 · airbnb/javascript

https://ko.javascript.info/import-export

모듈 내보내고 가져오기