Default Export / Named Export ?

✅ 이전 포스팅에서 초기 렌더링 속도를 개선하고자 했을 때 import 방식을 바꾼 적이 있습니다. default export, named export의 사용 차이점에 대해서는 알고 있었지만 정확한 개념과 특징에 대해 알기 위해서 공부하고 포스팅을 합니다.

---

📌 Default Export

/* export : MyFunc.js */

const MyFunc = () => {}
export default MyFunc; // ok 

export default const MyFunc = () => {} // error


/* import */

import MyFunc from "./MyFunc"; // ok
import newFunc from "./MyFunc"; // ok

 

[ export ]

 

• Default로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스만 export 할 수 있습니다.
• let, const 를 바로 default export 할 수는 없습니다. (- error 부분)

[ import ]

 

• 모듈의 이름이 무엇이든지 상관없이 default로 내보낸 모듈은 어떤 이름으로든지 import 할 수 있습니다.

 

📌 Named Export

/* export : MyFunc.js */

export const MyFunc = () => {}
export const MyFunc2 = () => {}
export const MyFunc3 = () => {}


/* import 방법 1. 기본 */

import {MyFunc} from "./MyFunc";
import {MyFunc2} from "./MyFunc";
import {MyFunc3} from "./MyFunc";


/* import 방법 2. 여러개 혹은 한번에 불러오기 */

import {MyFunc, MyFunc2, MyFunc3} from "./MyFunc"; // 여러개 불러오기

import * as myFuncs from "./MyFunc"; // 한번에 불러오기
myFuncs.MyFunc(); // ok
myFuncs.MyFunc2(); // ok
myFuncs.MyFunc3(); // ok

/* import 방법 3. 
   import {export한 이름 as 재정의하여 사용할 이름} from "불러오는 파일 경로";
*/

import {MyFunc as callFunc} from "./MyFunc";
callFunc(); // ok

 

[ export ]

 

• 하나의 파일 내에서 여러 변수 또는 클래스 등을 export 할 수 있습니다.

[ import ]

 

• import할 때는 기본적으로 export할 때 사용된 변수명을 동일하게 설정하고 중괄호로 감싸서 불러옵니다.
• 불러오는 파일의 export 한 갯수와 상관없이 불러올 때는 원하는 것만 택하여 불러옵니다. (- 방법 1)
• import { export 이름 as 재정의할 이름} from "파일 경로" 형식으로 export 의 이름을 재정의하여 사용할 수 있습니다. (- 방법 2)
• 중괄호({})안에 export할 모듈을 , 로 구분하여 여러 개를 나열하여 불러올 수 있습니다. (- 방법 2)
• * 키워드를 쓰면 파일에 있는 모든 모듈을 한꺼번에 불러옵니다. (- 방법 3)

 

🤔 그럼 뭘 써야할까요?

• 먼저 위에서 보셨다시피 사용법에 차이만 있지 import하여 사용하면 함수 자체 동작은 똑같습니다.

 

Tree-Shaking
 - 나무를 흔들어서 죽은 나뭇잎들을 떨어뜨리듯, 코드를 빌드할 때 실제로 쓰지 않는 코드들을 제외한다는 뜻.

 

• 하지만 최근 제가 가장 관심을 가지고 있는 Tree-Shaking 관점에서 보면 차이점이 있습니다.
  
  
  • 큰 객체를 default export 한다면 tree-shaking이 불가능합니다. (한 번에 모두 불러와 사용하므로 사용하지 않는 값들이 포함될 가능성이 높음)
  • 반면 큰 객체라도 named export로 하나씩 export 하여 사용한다면 사용하지 않는 값들에 대해 tree-shaking이 가능합니다.

• 이 외에도 default export의 단점은 여러 가지가 있습니다.
  
  
  • 검색이 어려움 + 리팩터링의 어려움
  • commonJS 사용자들에게 혼동을 줄 수 있음.
  • named export가 다시 export 하는데 훨씬 편함.
  • .. 등등

 

❗그렇다면 모든 케이스에 named export를 쓰는 것이 좋을까요?

개인적인 대답은 "아니요 !" 입니다.

 

• 내보낼 것이 한 개인 경우나 내보내고 모두 사용하면 default export ..
• 상수들이나 여러 개의 export가 필요한 경우 named export ..

따라서 default export, named export 의 차이와 사용법에 대해서 숙지하여 자신의 상황에 따라 적절한 export를 사용하는 게 제일 좋은 것 같습니다 ~ 

 

 

🔗 참고한 글

모듈 내보내고 가져오기