[JavaScript] Default Export 와 Named Export 비교

서론

큰 이유 없이 둘을 혼용하여 사용하고 있다는 것을 느끼고, 둘의 차이를 비교하여 내 코드에 적용하기 위해 정리를 하게 되었다.

---

Default Export

Default Export는 딱 한개만 default export 할 수 있기 때문에 '메인'이라고 할 수 있는 것을 export 하는 것이 좋다.

object, function, class 등이 될 수 있다.

 

// import 
import DefaultValue from "./MyDefaultValue";

// export
const DefaultValue = () => {}
export default DefaultValue

 

Default Export 특징

import 시 원하는 변수명을 지정해줄 수 있다.

 

// import 
import DefaultValuelalala from "./MyDefaultValue";

//or

import Something from "./MyDefaultValue";

// export
const DefaultValue = () => {}
export default DefaultValue

 

var, let, const를 바로 export default 할 수 없다. 

// O
export default function test() {}

// X
export default const test = () => {}

---

Named Export

한 파일 내에서 여러 값을 export 할 때 유용하다.

API를 모듈화 하여 사용하기 용이하다.

 

// export 
// myFunction.js
export const firstFunction = () => { }
export const secondFunction = () => { }

// myClass.js
export class firstClass { }
export class secondClass { }

// import 
import { firstFunction, secondFunction } from './myFunction'
import { firstClass, secondClass } from './myClass'

 

Named Export 특징

export된 이름을 사용하여 import 해야 한다.

 

// export 
// myFunction.js
export const x = () => { }
export const y = () => { }

// import 
import { x, y } from './myFunction' // 동일하게 사용

 

다른 이름으로 사용하기 위해선 as를 이용하면 된다.

// export 
// myFunction.js
export const x = () => { }
export const y = () => { }

// import 
import { x as firstFunction, y as secondFunction} from './myFunction' 
// → firstFunction, secondFunction 명으로 사용

---

어떤 것을 사용하는 것이 유용한가?

정해진 규칙은 없는것 같다, 서로에게 잘 맞는 것을 사용하면 될 것이라 생각한다.

또는, 자신이 속해있는 팀, 그룹, 회사의 스타일에 따라 동일하게 작성하면 될 것 같다.

 

---

참고자료

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 차이점

https://velog.io/@eunjin/React-Default-Export-vs-Named-Export

[React] Default Export vs Named Export