[Javascript] export와 export default의 차이점

저도 원래 사용하고 있는 문법이었습니다. 그런데 업무 중에 시니어 개발자 코드에서 export와 export default를 하나의 javascript 파일에서 동시에 사용하는 것을 보고, 언제 export {}를 쓰고, 언제 export defautl 를 사용하는지가 궁금해졌습니다.

 

예시로 아래 코드처럼 말이죠.

// 📄 index.js

const alertData = {
  alertMessage: '',
  type: 'error'
}


export default alertData

export {alertData}

차이점

export {}	export default
named export라고 함. ex) import 무조건 export한 객체 | 함수 이름	개발자가 원하는 이름으로 import 할 수 있음. ex) import 원하는 이름 from '파일'

 

 

👇 예시

// 📄 index.js

// 👇 default export
export default getUserInfo =()=> {
  console.log('i am iron man');
}

// 👇 named export
export deleteUser =() => {
  console.log('delete');
}


// 📄 main.js
import UserInfo from './index'  // 👈 getUserInfo 함수가 import 됨. 이름 마음대로 변경해서 사용 가능.
import getUserInfo from './index'  // 👈 getUserInfo함수가 import 됨. 이름 마음대로 변경해서 사용 가능.
import requestDeleteUser from './index' // 👈 getUserInfo함수가 import 됨.
import { deleteUser } from './index'  //👈 deleteUser 함수가 import 됨. named export는 선언된 메서드 이름 또는 변수 명으로만 import 받아야 한다.

// ⭕ named와 defualt export를 둘 다 import 가능
import {default as UserInfo, deletUser } from './index'

 

named export 장점이자 단점

내보냈을 때 사용한 이름 그대로 가져오므로 관련 정보를 파악하기 쉽습니다

 

default export 장점

named export와는 다르게 default export는 가져오기 할 때 개발자가 원하는 대로 이름을 지정해 줄 수 있습니다.

default export 단점

import 하는 것이 정확히 어떤 건지 알 수 없다는 겁니다. 

이 단점을 해소하기 위해서 다음과 같은 방법들을 사용할 수 있습니다.

- named export만 사용하기로 한다.

- default export 한 것을 가져올 땐 아래와 같이 파일 이름과 동일한 이름을 사용하도록 팀원끼리 내부 규칙을 정할 수 있습니다.

 

 

 

 

 

항상 봐오던 import {}와 export default였습니다. 

이번 포스팅을 하면서 모르는 코드를 파악할 수 있는 기회가 되었습니다.

 

 

 

참고

모듈 내보내고 가져오기