[JavaScript] Named Export와 Default Export의 차이점

Named Export

Named export는 여러 개의 변수를 내보낼 수 있으며, 각각의 변수는 반드시 중괄호 {}로 감싸서 임포트해야 합니다. 예를 들어, 파일에서 다음과 같이 여러 개의 변수를 내보낼 수 있습니다:

// utils.js
export const foo = 'foo';
export const bar = 'bar';
export const baz = 'baz';

 

임포트할 때는 다음과 같이 중괄호 {}를 사용하여 필요한 변수만 선택적으로 임포트할 수 있습니다:

// main.js
import { foo, bar } from './utils';

Default Export

Default export는 한 파일당 하나의 값만 내보낼 수 있으며, 중괄호 없이 임포트할 수 있습니다. 예를 들어, 파일에서 다음과 같이 하나의 값을 내보낼 수 있습니다:

// utils.js
const foo = 'foo';
export default foo;

 

임포트할 때는 중괄호 없이 임포트할 수 있습니다:

// main.js
import foo from './utils';

차이점 요약

1. 수량 제한: Default export는 파일당 하나의 값만 내보낼 수 있지만, Named export는 여러 개의 값을 내보낼 수 있습니다.
2. 임포트 방법: Default export는 중괄호 없이 임포트하고, Named export는 중괄호를 사용하여 임포트합니다.
3. 이름 변경: Default export는 임포트 시 이름을 변경할 수 있지만, Named export는 지정된 이름으로만 임포트할 수 있습니다.

---

예시

Named Export

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './utils';
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

Default Export

// utils.js
const add = (a, b) => a + b;
export default add;

// main.js
import add from './utils';
console.log(add(2, 3)); // 5

 

이처럼 Named export와 Default export는 각기 다른 목적과 용도로 사용되며, 상황에 맞게 선택하여 사용할 수 있습니다.