JavaScript에서 export { }와 export default의 차이점

 

 

>> 그래서 적어본 export와 export default의 차이점! <<

 

 

 

 

 

출처: https://www.google.com/url?sa=i&url=https%3A%2F%2Fbootcamp.uxdesign.cc%2Fnamed-export-vs-default-export-in-es6-a2370b062f17&psig=AOvVaw3526ddTwrULsBlVYSnaxql&ust=1715784990773000&source=images&cd=vfe&opi=89978449&ved=0CBQQjhxqFwoTCKiR16azjYYDFQAAAAAdAAAAABAE

 

JavaScript 모듈 시스템은 코드를 구성하고 재사용하기 위한 방법을 제공하고 있습니다.

그 중 export는 2가지 방법이 있습니다. Named Export 라는 방법과 Default Export 라는 방법이 있습니다. 이 두 가지 방법은 모듈에서 함수, 객체, 변수 등을 내보내고 다른 모듈에서 사용할 수 있게 해줍니다. 이 두 방법은 차이점이 있고, 효율적인 코드 관리를 하려면 알아두는 것이 좋습니다.

 

저도 정확한 명칭을 잘 몰라서 export 와 export default 라고 설명하고 다녔었는데, 이번에 조사하면서 이렇게 명칭이 있다는 것을 알았습니다.

Named Exports (export)

Named exports는 모듈에서 여러 값을 내보낼 때 사용됩니다. 이 방식을 사용하면, 내보낸 각각의 값에 이름을 지정해야 하며, 다른 모듈에서 이 값을 가져올 때는 그 정확한 이름을 사용해야 합니다.

함수 앞에 export를 붙여 내보내기

// math.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

별도로 export에 함수명만 기입하여 내보내기

// math.js
function multiply(x, y) {
  return x * y;
}

function divide(x, y) {
  return x / y;
}

export { multiply, divide };

다른 파일에서 이러한 값들을 사용하려면, 다음과 같이 작성합니다.

// app.js
import { add, subtract, multiply, divide } from './math';

const resultAdd = add(10, 5);
const resultSubtract = subtract(10, 5);
const resultMultiply = multiply(10, 5);
const resultDivide = divide(10, 5);

console.log(`10과 5를 더한 결과: ${resultAdd}`);
console.log(`10에서 5를 뺀 결과: ${resultSubtract}`);
console.log(`10과 5를 곱한 결과: ${resultMultiply}`);
console.log(`10을 5로 나눈 결과: ${resultDivide}`);

Default Export (export default)

Default export는 모듈에서 단 하나의 값만 내보낼 때 사용됩니다. 이 방식은 모듈이 주로 하나의 기능을 제공할 때 유용하며, 가져올 때는 어떤 이름을 사용해도 됩니다.

// calculator.js
const calculator = {
  add(x, y) {
    return x + y;
  },
  subtract(x, y) {
    return x - y;
  }
};

export default calculator;

이 모듈을 가져올 때는 다음과 같이 작성할 수 있습니다.

// app.js
import calc from './calculator';

// calculator 모듈에서 가져온 함수를 사용합니다.
const resultAdd = calc.add(10, 5);
const resultSubtract = calc.subtract(10, 5);

console.log(`10과 5를 더한 결과는 ${resultAdd}입니다.`);
console.log(`10에서 5를 뺀 결과는 ${resultSubtract}입니다.`);

언제 어떤 방식을 사용해야 할까요?

• 단일 기능을 제공하는 모듈의 경우, export default 를 사용하는 것이 좋습니다.
• 여러 기능을 제공하거나, 모듈의 사용자가 모듈의 특정 부분만 필요로 하는 경우, named exports를 사용하는 것이 좋습니다.

성능차이?

아래의 stack overflow의 글은 성능 차이가 없다고 언급하고 있으며, 코딩 스타일의 차이에 따른 것이라고 설명하고 있습니다. 그래서 마음에 드는걸로 쓰셔용!

Differences between Javascript "export default" styles - Stack Overflow

자료

1. What’s the Difference Between Default and Named Exports in JavaScript?
2. Stack Overflow: Why and when to use default export over named exports in ES6 Modules?
3. GeeksforGeeks: Difference Between Default & Named Exports in JavaScript
4. Medium: Understanding the Difference between export default and export with Named Exports in JavaScript
5. Medium: Named Export vs Default Export in ES6