JavaScript Import 문법 심층 분석: Named Export vs. Default Export

JavaScript 모듈 시스템에서 가장 기본적인 개념 중 하나인 import 문법은, 다른 모듈에서 정의된 변수, 함수, 클래스 등을 가져와 사용할 수 있도록 해줍니다. 하지만 import 문법은 단순히 다른 모듈의 내용을 가져오는 것 이상으로, 어떤 방식으로 모듈이 내보내졌는지에 따라 다양한 형태를 가질 수 있습니다. 이번 글에서는 import 문법의 두 가지 주요 방식인 Named Export와 Default Export에 대해 자세히 알아보고, 각 방식의 특징과 사용법을 예시와 함께 설명하도록 하겠습니다.

Named Export

Named Export는 하나의 모듈에서 여러 개의 변수, 함수, 클래스 등을 명확한 이름으로 내보내는 방식입니다. 가져올 때는 내보낸 이름과 동일하거나 별칭을 사용하여 가져올 수 있습니다.

예시:

// 모듈A.js
export const name = 'Alice';
export function greet(message) {
  console.log(message);
}

// 모듈B.js
import { name, greet } from './모듈A.js';

console.log(name); // Alice
greet('Hello!');

위 예시에서 모듈A.js는 name과 greet을 Named Export로 내보내고, 모듈B.js는 import 문을 통해 이들을 가져와 사용합니다.

특징:

• 여러 개 내보내기: 하나의 모듈에서 여러 개의 요소를 내보낼 수 있습니다.
• 명확한 이름: 각 요소에 명확한 이름을 부여하여 가져올 때 혼동을 줄입니다.
• 별칭 사용 가능: as 키워드를 사용하여 가져올 때 이름을 변경할 수 있습니다.

Default Export

Default Export는 하나의 모듈에서 단 하나의 요소만 기본적으로 내보내는 방식입니다. 가져올 때는 임의의 이름으로 가져올 수 있습니다.

728x90

 

// 모듈C.js
export default function add(a, b) {
  return a + b;
}

// 모듈D.js
import add from './모듈C.js';

const result = add(2, 3);
console.log(result); // 5

위 예시에서 모듈C.js는 add 함수를 Default Export로 내보내고, 모듈D.js는 add를 임의의 이름으로 가져와 사용합니다.

특징:

• 하나의 요소: 하나의 모듈에서 단 하나의 요소만 기본적으로 내보낼 수 있습니다.
• 임의의 이름: 가져올 때 임의의 이름으로 지정할 수 있습니다.
• 주요 기능: 보통 모듈의 주요 기능을 나타내는 요소를 Default Export로 내보냅니다.

Named Export와 Default Export의 조합

하나의 모듈에서 Named Export와 Default Export를 함께 사용할 수도 있습니다.

JavaScript

 

// 모듈E.js
export const PI = 3.14159;
export default function circleArea(radius) {
  return PI * radius * radius;
}

// 모듈F.js
import circleArea, { PI } from './모듈E.js';

console.log(circleArea(2)); // 12.56636
console.log(PI); // 3.14159

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

• Named Export: 여러 개의 관련된 요소를 함께 내보낼 때, 각 요소를 명확하게 구분하고 싶을 때 사용합니다.
• Default Export: 모듈의 주요 기능을 나타내는 하나의 요소를 내보낼 때, 간단하게 가져오고 싶을 때 사용합니다.

728x90

Named Export와 Default Export는 JavaScript 모듈 시스템에서 매우 중요한 개념입니다. 각 방식의 특징을 잘 이해하고, 적절하게 사용하면 더욱 효율적이고 가독성 높은 코드를 작성할 수 있습니다.

 

핵심:

• Named Export는 여러 개의 요소를 명확한 이름으로 내보내는 방식입니다.
• Default Export는 하나의 요소를 기본적으로 내보내는 방식입니다.
• import 문법은 내보낸 방식에 따라 다르게 사용됩니다.
• Named Export와 Default Export를 조합하여 사용할 수 있습니다.

주의:

• 라이브러리나 프레임워크를 사용할 때는 해당 라이브러리의 문서를 참고하여 어떤 방식으로 모듈이 내보내졌는지 확인해야 합니다.
• export와 import 문법은 JavaScript 모듈 시스템의 기본이므로, 반드시 숙달해야 합니다.