React : export default? export?

✅ 운영체제 : Windows 11

🤔 들어가기 전

React를 사용할 때 export와 export default에 대한 궁금증이 생겼다..!!
두 개의 차이점이 무엇인지 정리해 보자! (｡･∀･)ﾉﾞ

---

export default? export?

📖 참고자료
JAVASCRIPT Info_모듈 내보내고 가져오기
MDN export
은돌1113_export와 export default의 차이점
Mattshelley_JS: Export vs Export Default

export defualt

🔶 Default Export

🔶 해당 모듈에는 개체가 하나만 존재

🔶 개체 하나만 선언되어있는 모듈

🔶 내보내기 했을 때 이름을 파악하기 쉽지 않음

🔶 개발자가 원하는 이름으로 지정할 수 있음

🔶 중괄호 필요 X

⚙️ 예시 코드

1. 내보내고자 하는 객체 앞에 export default를 붙여준다.

// 📁 user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

2. export default를 사용하여 모듈을 내보내면 중괄호({})없이 모듈을 가져올 수 있다.

// 📁 main.js
import User from './user.js';

new User('CoCo');

export

🔶 Named Exports

🔶 해당 모듈에 여러 개의 개체가 존재

🔶 여러 개의 개체 내보내기

🔶 내보내기 했을 때 사용한 이름 그대로 가져올 수 있음

🔶 중괄호 필요 O

⚙️ 예시 코드

1. 내보내고자 하는 객체 앞에 export를 붙여준다.

// 📁 module.js
export const value = 123

2. export를 사용하여 모듈을 내보내면 중괄호({})를 사용하여 모듈을 가져온다.

// 📁 another-module.js
import { value } from './module'