집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 모듈 및 가져오기/내보내기 시스템 이해

JavaScript 모듈 및 가져오기/내보내기 시스템 이해

Linda Hamilton원래의: 2024-12-20 02:15:09937검색

Understanding JavaScript Modules and the Import/Export System

JavaScript의 모듈 및 가져오기/내보내기

JavaScript에서 모듈을 사용하면 코드를 더 작고 재사용 가능한 조각으로 나누어 구성, 유지 관리 및 가독성을 향상시킬 수 있습니다. 모듈은 특히 코드베이스가 커질 때 확장 가능한 애플리케이션을 만드는 데 필수적입니다. ES6(ECMAScript 2015)의 도입으로 JavaScript는 서로 다른 파일 간에 코드를 가져오고 내보낼 수 있는 기본 모듈 시스템을 얻었습니다.

JavaScript의 모듈 이해

모듈은 본질적으로 자체 파일에 저장되는 코드 조각입니다. 이 코드는 애플리케이션의 다른 부분에서 사용할 수 있도록 만들고 싶은 변수, 함수, 클래스 또는 기타 구성을 정의할 수 있습니다.

모듈에서 내보내기

한 파일의 변수, 함수 또는 클래스를 다른 파일에서 사용할 수 있도록 하려면 내보내기 키워드를 사용합니다. JavaScript의 모듈에서 내보내는 방법에는 named 내보내기와 기본 내보내기

두 가지가 있습니다.

1. 지정 수출

이름이 지정된 내보내기를 사용하면 모듈에서 여러 항목(변수, 함수 등)을 내보낼 수 있습니다. 이름을 지정하여 내보냅니다.

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

2. 기본 내보내기

기본 내보내기를 사용하면 함수, 클래스 또는 개체일 수 있는 단일 값을 내보낼 수 있습니다. 기본 내보내기는 일반적으로 모듈의 주요 기능 하나를 내보내려는 경우에 사용됩니다.

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

모듈 가져오기

다른 파일의 모듈에서 내보낸 값에 액세스하려면 import 키워드를 사용합니다. 가져오기에는 named imports와 default imports의 두 가지 유형이 있습니다.

1. 명명된 수입품

이름이 지정된 내보내기를 가져올 때 내보내기 명세서에 사용된 정확한 이름을 사용해야 합니다.

// app.js (Main File)
import { add, subtract } from './math.js';

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

2. 기본 가져오기

기본 내보내기를 가져올 때 가져온 값의 이름을 선택할 수 있습니다.

// app.js (Main File)
import multiply from './math.js';

console.log(multiply(2, 3));  // Output: 6

3. 명명된 가져오기와 기본 가져오기 결합

이름이 지정된 가져오기를 동일한 모듈의 기본 가져오기와 결합할 수도 있습니다.

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

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

console.log(multiply(2, 3));  // Output: 6
console.log(add(2, 3));  // Output: 5

클래스 내보내기 및 가져오기

함수 및 변수와 동일한 방식으로 클래스를 내보내고 가져올 수 있습니다.

예: 클래스 내보내기 및 가져오기

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

동적 가져오기

JavaScript는 런타임에 조건부로 모듈을 로드할 수 있는 동적 가져오기도 지원합니다. 이는 필요할 때만 모듈을 로드하여 초기 로드 시간을 줄이는 코드 분할에 유용할 수 있습니다.

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

브라우저의 모듈

최신 브라우저에서는 ES6 모듈을 기본적으로 사용할 수 있습니다.