[Javascript] default export와 named export

📚 import, export 

프로그램을 작성하다보면 다른 모듈에서 함수나 변수들을 가져와 활용하는 경우가 많은데, 이를 사용하기 위해서는 import, export 문을 통해서 해당 행위를 실행한다. 

 

간단하게 보자면, import은 자신의 스페이스에 다른 모듈의 것을 불러온다는 의미이며, export는 반대로 다른 모듈에게 함수나 값을 전달하는 의미로 받아드리면 된다.

 

 

📚 Named Export와 Default Export

Export 하는 방법은 2가지가 있는데 차이점은 다음과 같다.

 

• Default Export
  - 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다.
  - from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 있다.
• Named Export 
  - 한 파일 내에서 여러개의 변수/클래스/함수를 Export 할 수 있다.
  - Import할 때 as 키워드를 사용해서 다른 이름을 지정할 수 있다.

 

 

📘 Defalut Export 

// export
const MyComponent = () => {}
export default MyComponent;

// import
import MyComponent from "./MyDefaultExport";

 

 

📘 Named Export 

// exports 
export const MyComponent = () => {}
export const MyComponent2 = () => {}

// imports
import { MyComponent } from "./MyComponent";
import { MyComponent, MyComponent2 } from "./MyComponent";

 

 

 

 

 

📚 어떤 것이 더 좋은가?

상황에 따라 다르겠지만 Airbnb JavaSciprt Style Guide 에서는 default export을 권장하고 있다. 하지만 항상 프로그램을 작성하다 보면, 항상 상황마다 다르기 때문에 적절히 섞어 쓰는 판단이 필요 할 듯 하다. 

 

 

 

 

 

---

🔗 참고 블로그

 

☑️ https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

Why we have banned default exports in Javascript and you should do the same

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

default export와 named export 차이점