[javascript][typescript] default export vs export ~

javascript, typescript를 사용하다보면 모듈을 많이 만들게 되고 그때마다 파일 하단에는 "export default ~" 혹은 "export const ~" 등의 export 문법을 사용하게 된다.

이글은 무지성으로 export 하는 것을 막기 위한 글이다.

 

export에는 default export와 named export가 있다

 

1. default export                                                                                                  

    - 파일당 최대 1개의 default export가 있을 수 있음

    - 보통 파일 내에서 한개만 export할 때 vs 대표로 export할 것이 있을 때 많이 사용

    - 해당 모듈에는 개체가 하나만 있다는 사실을 의미

    - import할 때 중괄호{} 없이 가져올 수 있음

    - 위와 같이 export할 경우 import할 때 아무 이름으로나 import 해도 됨

    - 아래 처럼 import 뒤에 내 맘대로 사용하고 싶은 이름으로 쓸 수 있음

// 1.
import Navigation from 'src/pages/NavigationPage'
// 2.
import ThisNavigation from 'src/pages/NavigationPage'

반응형

2. named export                                                                                                  

    - 선언부 앞에 export 붙이는 경우

    - 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙임 (아래 예시)

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const THIS_YEAR = 2023;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

 

    - 하지만 꼭 선언부 앞에 export붙이는 방식으로만 내보낼 수 있는 것은 아님

    - 먼저 선언한 후, 파일 하단 마지막에서 내보내기도 가능 (아래 예시)

// User.js
function setAge(user) {
  age = user.age;
}

function setName(user) {
  name = user.name;
}

export {setAge, setName}; // 두 함수 내보내기