JavaScript 모듈 시스템: export와 export default의 차이점 및 사용법

JavaScript에서 export default와 export는 모듈 시스템에서 매우 중요한 개념입니다. 이 글에서는 이 두 가지 방식의 차이점, 각각의 사용 방법, 그리고 다양한 예제와 함께 관리 측면에서 어떤 방식이 더 적절한지 알아보겠습니다.

---

1. export와 export default의 기본 개념

export

export는 모듈에서 여러 가지 변수를 내보낼 때 사용합니다. 이 방식은 하나의 파일에서 여러 개의 함수를, 변수를, 혹은 클래스를 내보낼 수 있도록 해줍니다.

예시:

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

해당 모듈을 가져올 때는 다음과 같이 사용합니다.

// main.js
import { add, subtract } from "./mathUtils";

console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3

export default

export default는 모듈 시스템의 유연성과 편의성을 향상시키기 위해 개발되었습니다. 이 기능의 주요 필요 이유는 다음과 같다.:

1. 단일 주요 기능 강조: 모듈에서 가장 중요하거나 주로 사용될 기능을 명확히 표시할 수 있습니다.
2. 간편한 임포트: 기본 내보내기를 사용하면 임포트 시 중괄호 없이 간단하게 가져올 수 있어 코드 작성이 더 간결해집니다.
3. 이름 변경의 자유: 임포트 시 원하는 이름으로 자유롭게 변경할 수 있어 코드의 가독성과 유지보수성이 향상됩니다.
4. 라이브러리 설계 유연성: 라이브러리 작성자가 주요 기능을 강조하면서도 추가 기능을 일반 export로 제공할 수 있게 해줍니다.

이러한 이유로 export default는 모듈 시스템에서 중요한 역할을 하며, 개발자들에게 더 나은 코드 구조화 옵션을 제공합니다.

예시:

// greet.js
const greet = (name) => `Hello, ${name}!`;
export default greet;

해당 모듈을 가져올 때는 다음과 같이 사용합니다.

// main.js
import greet from "./greet";

console.log(greet("Alice")); // Hello, Alice!

2. export와 export default의 차이점

특성	export	export default
내보낼 수 있는 항목	여러 개	하나만 가능
가져올 때 중괄호 사용	필수	사용하지 않음
이름 변경	가져올 때 자유롭게 변경 불가능	가져올 때 자유롭게 변경 가능
사용 시 주의사항	여러 항목을 내보낼 때 편리	기본값을 내보낼 때 유용

3. 다양한 예제 및 사용 방법

3.1 여러 개의 export

// shapes.js
export const circleArea = (radius) => Math.PI * radius * radius;
export const squareArea = (side) => side * side;
export const triangleArea = (base, height) => 0.5 * base * height;

가져올 때 필요한 부분만 가져올 수 있습니다.

// main.js
import { circleArea, squareArea } from "./shapes";

console.log(circleArea(5)); // 78.53981633974483
console.log(squareArea(4)); // 16

3.2 export default와 export의 혼합 사용

// calculator.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
const calculatorName = "Simple Calculator";
export default calculatorName;

가져올 때는 다음과 같이 사용합니다.

// main.js
import calculatorName, { add, subtract } from "./calculator";

console.log(calculatorName); // Simple Calculator
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

3.3 이름을 변경하여 가져오기

export default의 경우 이름을 마음대로 변경할 수 있습니다.

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import sayHello from "./greet";

console.log(sayHello("Alice")); // Hello, Alice!

하지만 export로 내보낸 것은 이름을 변경할 수 없습니다.

// math.js
export const multiply = (a, b) => a * b;

// main.js
import { multiply as times } from "./math"; // 가능

console.log(times(2, 3)); // 6

4. 예외 및 주의할 점

1. 중복된 export default 사용 불가: 하나의 파일에서는 단 하나의 export default만 가능하기 때문에 중복 사용 시 에러가 발생합니다.
2. 중복된 export 가능: export는 여러 개 사용할 수 있지만, 동일한 이름을 가진 변수를 여러 번 내보낼 수는 없습니다.
3. export const name = "Alice"; export const name = "Bob"; // 에러 발생
4. 잘못된 가져오기 시 에러 발생: export와 export default의 차이를 정확히 알고 사용해야 합니다.

// onetwo.js
 export default function one() {} 
 export default function two() {} // 에러 발생

// greet.js 
 export default function greet(name) { 
 	return `Hello, ${name}!`; 
 } 
 
 // main.js 
 import { greet } from "./greet"; // 에러 발생: export default를 중괄호로 가져올 수 없음

5. 장기적인 관리 측면에서의 선택

• export는 모듈 내에서 여러 기능을 제공할 때 유용합니다. 또한 이름이 명시적으로 지정되어 있어 코드의 가독성을 높입니다.
• export default는 모듈의 대표적인 기능을 내보낼 때 편리합니다. 하지만 이름이 명시적이지 않아, 협업 시 어떤 기능을 가져오는지 파악하기 어려울 수 있습니다.

권장 사항

• 다수의 내보내기가 필요한 경우: export를 사용해 명시적인 구조를 유지하세요.
• 단일 기능의 모듈인 경우: export default를 사용하여 간결한 코드를 유지하세요.
• 함께 사용: export와 export default를 함께 사용하여 필요한 기능에 유연성을 주되, 모듈의 일관성을 유지하세요.

6. 실제 프로젝트에서의 예시

예시 1: 유틸리티 함수 모음

// utils.js
export function formatDate(date) {
  /* ... */
}
export function parseQuery(queryString) {
  /* ... */
}
export function generateRandomId() {
  /* ... */
}

이 경우 여러 유틸리티 함수가 있으므로 export를 사용하여 명시적으로 내보내는 것이 좋습니다.

예시 2: API 클라이언트

// apiClient.js
export default class ApiClient {
  constructor(baseURL) {
    /* ... */
  }
  get(endpoint) {
    /* ... */
  }
  post(endpoint, data) {
    /* ... */
  }
}

API 클라이언트와 같이 하나의 클래스가 메인 역할을 하는 경우 export default를 사용하여 가져오기 코드를 간결하게 유지할 수 있습니다.

7. 결론

export와 export default는 각각의 역할과 용도가 있으며, 상황에 따라 적절한 방식을 선택해야 합니다.

• 모듈의 가독성과 유지 보수성을 높이고자 한다면 export를 주로 사용하되, 대표적인 기능을 내보낼 때는 export default를 활용하는 것이 좋습니다.
• 협업 시나 프로젝트의 규모가 커질수록 명시적인 export 사용을 추천합니다.

최종 팁: 코드 일관성을 유지하고 팀 내에서 모듈 사용 규칙을 정하여 효율적인 모듈 관리 전략을 세우세요.