[JavaScript] export, export default 비교

프로젝트 하면서 export, import 할 일이 많은데 매번 헷갈리는 것 같아서 정리해두고자 한다.

export default

• 하나의 모듈에서 export default는 하나만 가능하다.
• 하나의 모듈에서 하나의 export default만 존재하기 때문에 import 시 원하는 이름으로 가져올 수 있다.

// Button.jsx

function Button() {
  return <button type="button">버튼</button>;
}

export default Button;

// Main.jsx

// 어떤 이름이든 가능
import MyBtn from './Button';

• 함수나 클래스의 경우에만 선언과 함께 export가 가능하다. 즉, var, let, const는 불가능하다.

// days.js
// 상수 예시

const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

export default months;

// formatDate.js
// 함수 예시

export default function formatDate() {
  ...
}

export

• 하나의 모듈에서 여러 개의 export가 가능하다.

let myVariable = Math.sqrt(2);
function myFunction() { ... };

export { myFunction, myVariable };

• 한 모듈에서 여러 개의 export, import를 할 경우 중괄호({ })를 사용한다. 이 때 as를 이용해서 이름을 바꿔줄 수 있다.
• import 할 경우에는 export 시 사용한 이름과 맞춰주어야 한다.

// export
export { variable1 as myVariable, variable2, variable3 };

// import
import { myVariable, variable2 } from ...;

• 변수, 상수, 함수, 클래스 모두 선언과 함께 export가 가능하다.

export let myVariable = Math.sqrt(2);
export function myFunction() { ... };

• 참고
  MDN export