1. Default Export
- default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있다.
const Verification = () => {
...
}export default default Verification
- import 할 때는 아무 이름으로나 import 가능하다.
즉,
import Verification from '../VerificationPage'또는
import ThisIsNotVerification from '../VerificationPage'이렇게 사용하는것이 가능하다는 것!
(어차피 파일당 하나만 export 되니까 무슨 이름을 붙이던 상관이 없는 거 아닐까?)
- 단,
var,let,const를 바로export default할 수 없다.
// 이렇게 하시면 안됩니다...
export default const MY_BIRTHDAY = "1994/03/09"
2. named export
- 한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능하다.
export class MyFirstClass { /* ... */ }
export class MySecondClass { /* ... */ }- 다만, import 시 {} 안에다가 export 된 이름과 동일하게 설정해야 한다.
import { MyFirstClass, MySecondClass } from './MyClass'- 다른 이름으로 import 할 수 있으나 아래처럼
as를 사용해야 한다.
import { MyFirstClass as BlahBlahClass, MySecondClass } from './MyClass'* as를 사용하면 한 파일에 있는 클래스/변수들을 한 번에 import 할 수 있다.
import * as Hello from './MyClass'
// 이렇게 import 하면 Hello.MyFirstClass 이런식으로 사용해야 함성능
performance 차이는 없는 것으로 보인다.
정리
named export 는 여러 값을 내보낼 때 유용합니다. 가져올 때는 내보낼 때와 동일한 이름을 사용하거나,
import { name as newName }구문을 사용해야 합니다.반면 default export 는 어떤 이름으로도 가져올 수 있습니다.
그래서 뭐 써야해요?
Airbnb JavaScript Style Guide 에서는…
하나만 export 하는 모듈이다면, named export가 아닌 default export를 쓴다
그런데, 위의 코딩 스타일에 반대 의견을 내는 사람도 있다.
아래는 그에 대한 답변이다. 물론 default를 모두 named로 바꿔야 한다는 것은 아니지만 default를 쓰면 읽기 편하고, 유지보수성이 향상되고, treeshaking이 가능하고, 개념적 이해 등등이 가능하다고 답변을 달았다.
Treeshaking
나무를 흔들어 나뭇잎을 떨어뜨리듯이, 사용하지 않는 코드를 제거하여 용량을 줄이는 최적화 과정을 말한다.
아 그래서 진짜 뭐 써야해요??
개발자 또는 팀이 정하기 나름 아닐까?
나의 경우는 default export를 우선적으로 사용하고, 한 파일에서 여러개를 export 해야하는 경우는 named export를 사용하고 있다.
보통 한개의 파일이 하나의 함수형 컴포넌트나 클래스를 담고있기 때문에 default export를 디폴트로 사용해도 문제가 생기지 않았기 때문이다.
named export는 상수들을 담은 constants 등의 파일에 사용하는 경우가 많다.
