import와 export는 JavaScript의 모듈 시스템에서 사용되는 키워드로, 코드를 여러 파일로 나누어 관리하고 필요한 모듈을 불러오기(import)와 외부로 공개(export)하는 기능을 제공합니다.

import와 export는 JavaScript의 모듈화 기능을 활용하여 코드를 모듈화하고 재사용성을 높일 수 있도록 도와주는 중요한 기능입니다. 생성한 모듈을 다른 파일에서 편리하게 사용하고, 필요한 모듈만 선택하여 불러올 수 있어 코드 관리와 유지보수에 유용합니다.

export

1. 개념

export 키워드는 해당 파일에서 변수, 함수 또는 클래스를 외부에 공개하여 다른 파일에서 사용할 수 있도록 합니다.

2. 구조

export 키워드 뒤에 공개할 변수, 함수 또는 클래스를 설정합니다.
export default를 사용해 기본으로 내보낼 수도 있습니다.

3. 사용 예시

// 변수, 함수, 클래스를 외부로 공개

export const myVar = 10;
export function myFunction() {
    return "Hello";
}
export class MyClass {
    constructor() {
        this.property = "Value";
    }
}

// 기본으로 외부로 공개

export default class DefaultClass {
    constructor() {
        this.defaultValue = "Default Value";
    }
}

import

1. 개념

import 키워드는 다른 파일에서 모듈을 불러와 사용할 수 있게 해줍니다.

2. 구조

import 키워드 뒤에 필요한 모듈 이름을 지정하여 불러옵니다.
필요한 부분만 선택하여 불러올 수 있습니다.

// Default Import
import defaultExport from "module-name";

// Namedspaced Import
import * as name from "module-name";

// Named Import
import { export1 } from "module-name";

• defaultExport: 모듈에서 기본적으로 내보내는 항목을 가져옵니다.
• name: 모둘의 일부 또는 전체를 가져올 때 사용됩니다.
• export1: 모듈에서 특정한 항목을 가져옵니다.

3. 옵션

1) import * as name from "module-name" 구문을 사용하여 해당 모듈의 모든 내보내기를 가져올 수 있습니다.

2) import { export1, export2 } from "module-name" 구문을 사용하여 해당 모듈의 특정한 내보내기만 가져올 수 있습니다.

3) as 키워드를 사용하여 가져온 항목에 다른 이름을 부여할 수 있습니다.

4. 사용 예시

1) Named Import

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

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from "./math";

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

2) Namespace Import

• 가져온 것을 설정된 이름(부모)으로 묶을 수 있음
• as 키워드를 사용하여 가져온 모듈 항목에 다른 이름을 지정할 수 있습니다. 이는 모듈에서 내보낸 항목 이름이 현재 모듈에서 이미 사용 중이거나, 의미적으로 더 명확한 이름을 부여하고자 할 때 유용합니다.

예를 들어, 다음과 같이 as 키워드를 사용하여 가져온 모듈 항목에 다른 이름을 부여할 수 있습니다.

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

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add as addition, subtract as subtraction } from "./math";

console.log(addition(2, 3)); // Output: 5
console.log(subtraction(5, 2)); // Output: 3

위 예시에서는 math.js 파일에서 export된 add 함수를 addition이라는 이름으로, subtract 함수를 subtraction이라는 이름으로 import하여 사용하고 있습니다. 이렇게 as 키워드를 사용하여 가져온 모듈 항목에 다른 이름을 부여하여 사용할 수 있습니다.

HTML 설정

import와 export를 사용하려면 HTML 에서 script 요소에서 type을 module로 해줘야함.

<script type="module" src="./main.ja" defer></seript>