export default란?

✅ export default란?

export default는 ES6 모듈 시스템에서 사용되는 키워드로, 모듈에서 기본적으로 내보낼(export) 값을 지정할 때 사용됩니다.

다른 파일에서 import할 때 이름을 자유롭게 변경하여 가져올 수 있다는 점이 큰 특징입니다.

---

🔹 export default 기본 예제

// utils.js
export default function sayHello() {
  console.log("Hello, World!");
}

// main.js
import greet from "./utils.js"; // 함수명을 자유롭게 변경 가능
greet(); // "Hello, World!"

✔️ export default로 내보낸 값은 import할 때 어떤 이름이든 사용 가능합니다.

---

🔹 export default vs. export (named export)

특징	export default	export (named export)
개수 제한	한 모듈에 1개만 가능	여러 개 가능
import 시 이름 변경	가능	불가능 (이름 그대로 가져와야 함)
import 방법	import anyName from "파일경로"	import { 함수명 } from "파일경로"

📌 export (named export) 예제

// utils.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from "./utils.js"; // 반드시 같은 이름으로 가져와야 함
console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3

---

🔹 export default와 export 혼합 사용

둘을 함께 사용할 수도 있습니다.

// math.js
export default function multiply(a, b) {
  return a * b;
}
export function divide(a, b) {
  return a / b;
}

// main.js
import multiply, { divide } from "./math.js";
console.log(multiply(3, 4)); // 12
console.log(divide(10, 2)); // 5

✔️ export default는 이름을 자유롭게 정해서 가져오고,
✔️ export (named export)는 원래 이름 그대로 가져와야 합니다.

---

🔹 언제 export default를 사용할까?

• 파일에서 한 개의 주 기능만 내보낼 때
  → 예: export default function mainLogic() {}
• 라이브러리, 유틸 함수, 클래스, 컴포넌트 등을 모듈화할 때
  → 예: export default class MyComponent {}

🔹 언제 export (named export)를 사용할까?

• 여러 개의 유틸 함수나 변수를 내보낼 때
  → 예: export function add() {}, export function subtract() {}
• 여러 개의 관련된 값들을 모듈에서 제공할 때
  → 예: export const PI = 3.14; export const E = 2.71;

---

💡 정리하자면:

• export default는 모듈의 대표적인 값을 내보낼 때 사용
• export는 여러 개의 값을 개별적으로 내보낼 때 사용

궁금한 점 있으면 질문 주세요! 😊