Default export vs Named export

작성을 하기전

문득 코드를 보는데 default export와 named export가 엄청 혼용되어서 사용되고 있었다.
뭔가 코드가 지저분한 생각이 들어서 하나의 방식으로 통일하려고 했는데, 혹시나 성능차가 있을까 싶어서 둘의 특징과 차이점을 찾아봤다.

1. Default Export

참고자료 MDN
default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있습니다.

const Test = () => {
     ...
}
export default default Test

! import 할 때는 아무 이름으로나 import 가능합니다.

example

import Test from '../Test'

or

import TestPage from '../Test'

이런식으로 이름을 자유롭게 붙일수 있습니다.

BUT!!

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

export default const MY_Test = "This is Test"

2. Named Export

한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능합니다.

참고자료 MDN

export class FirstTestClass { /* blabla */ }
export class SecondTestClass { /* blabla */ }

! 다만, import 시 {} 안에다가 export 된 이름과 동일하게 설정해야 한다.

Example

import { FirstTestClass, SecondTestClass } from './TestClass'

다른 이름으로 import 할 수 있으나 아래처럼 as를 사용해야 한다.

Example2

• as 를 사용하면 한 파일에 있는 클래스/변수들을 한 번에 import 할 수 있다.

import * as Hi from './TestClass'

성능

성능에는 차이가 없는 것으로 보입니다.

🤔 그래서 어떤걸 써야할까?

제 생각으로는 default export를 우선적으로 사용하고, 한 파일에서 여러개를 export 해야하는 경우는 named export를 사용하고 있다.
보통 한개의 파일이 하나의 함수형 컴포넌트나 클래스를 담고있기 때문에 default export를 디폴트로 사용해도 문제가 생기지 않았기 때문이다.
named export는 상수들을 담은 constants 등의 파일에 사용하는 경우가 많다.

References

StackOverflow

느낀점

개발은 이런식으로 하나씩 궁금점을 해결해 나가는 재미가 있는거 같다.
오늘보다 내일 더 나은 개발자가 되기 위해 달리자!