JavaScript에서 모듈은 내보내기를 사용하여 다른 모듈에 자산을 노출하고 가져오기를 사용하여 다른 모듈의 자산을 사용할 수 있는 독립형 코드 단위입니다. 이 메커니즘은 최신 JavaScript 애플리케이션에서 재사용 가능한 모듈식 코드를 작성하는 데 필수적입니다.

기본 내보내기

• 모듈에는 기본 내보내기가 하나만 있을 수 있습니다.
• 기본 자산을 내보내려면 내보낸 엔터티 앞에 기본 키워드를 사용하세요.
• 기본 내보내기를 가져오려면 내보낸 이름을 지정하지 않고 변수에 직접 할당할 수 있습니다.

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

지명된 수출

• 모듈에는 명명된 내보내기가 여러 개 있을 수 있습니다.
• 이름이 지정된 자산을 내보내려면 내보낸 엔터티 앞에 내보내기 키워드를 사용하고 이름을 지정하세요.
• 이름이 지정된 내보내기를 가져오려면 가져오려는 자산의 이름을 지정해야 합니다.

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

기본 및 명명된 내보내기 결합

단일 모듈에서 기본 내보내기와 명명된 내보내기를 모두 가질 수 있습니다.

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

기본 내보내기와 명명된 내보내기를 모두 가져오려면:

import greet, { farewell } from './myModule';

기억해야 할 핵심 사항

• 내보내기는 모듈에서 자산을 노출하는 데 사용됩니다.
• import는 다른 모듈의 자산을 소비하는 데 사용됩니다.
• 모듈에는 기본 내보내기가 하나만 있을 수 있습니다.
• 지정된 내보내기는 개별적으로 또는 일괄적으로 가져올 수 있습니다.
• 가져오기에 사용되는 이름은 임의적이며 내보낸 모듈에 사용된 이름과 일치할 필요는 없습니다.

실제 예

React 구성요소를 고려해보세요.

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

이 예에서는 인사말 구성 요소가 기본 내보내기로 내보내집니다. 다른 구성 요소에서 가져와 사용할 수 있습니다.

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

내보내기와 가져오기를 이해하면 JavaScript 프로젝트에서 코드를 효과적으로 구성하고 재사용할 수 있습니다.