[기초]Javascript export, import 모듈

자바스크립트에서 import와 export는 모듈 시스템의 핵심 개념으로, 코드를 모듈화하고 재사용성을 높이는 데 중요한 역할을 합니다. 이 시스템은 ES6(ECMAScript 2015)부터 도입되었으며, 자바스크립트 코드의 유지 보수성을 크게 향상시킵니다.

 

export: 모듈 내보내기

export는 모듈에서 변수, 함수, 객체, 클래스 등을 다른 파일에서 사용할 수 있도록 내보낼 때 사용됩니다. export에는 두 가지 주요 형태가 있습니다: Named Export와 Default Export.

 

•  Named Export(export)

Named Export는 특정 변수나 함수를 내보낼 때 사용되며, 하나의 모듈에서 여러 개의 Named Export를 사용할 수 있습니다.

// math.js
export const pi = 3.14;

export function add(a, b) {
  return a + b;
}

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

위 예제에서 pi 변수, add 함수, 그리고 Calculator 클래스가 각각 내보내졌습니다. 이를 Named Export라고 합니다.

 

• Default Export(export default)

Default Export는 모듈에서 하나의 값만 내보낼 때 사용됩니다. 이 값은 파일 전체에서 하나만 있을 수 있으며, 이름을 지정하지 않고 내보낼 수 있습니다.

// person.js
export default class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

위 예제에서는 Person 클래스가 Default Export로 내보내졌습니다. Default Export는 모듈에서 하나만 존재할 수 있습니다.

 

• export와 export default의 차이점

export default는 모듈에서 기본값으로 내보내는 것이고, import 시에 가져오는 이름을 자유롭게 정할 수 있지만, Named Export는 반드시 동일한 이름으로 가져와야 한다는 점을 추가로 강조할 수 있습니다.

 

---

import: 모듈 가져오기

import는 다른 모듈에서 내보낸 변수, 함수, 클래스 등을 가져올 때 사용됩니다. import는 가져오는 방식에 따라 여러 가지 형태로 사용됩니다.

 

• Named Import

Named Export된 요소를 가져올 때는 동일한 이름을 사용하여 가져와야 합니다.

// main.js
import { pi, add, Calculator } from './math.js';

console.log(pi); // 3.14
console.log(add(2, 3)); // 5

const calculator = new Calculator();
console.log(calculator.subtract(5, 3)); // 2

위 코드에서는 math.js 모듈에서 pi, add 함수, Calculator 클래스를 가져와서 사용합니다.

 

• Import All

모듈에서 모든 내보낸 요소를 하나의 객체로 가져올 수 있습니다.

// main.js
import * as math from './math.js';

console.log(math.pi); // 3.14
console.log(math.add(2, 3)); // 5

const calculator = new math.Calculator();
console.log(calculator.subtract(5, 3)); // 2

여기서 math는 math.js 모듈의 모든 Named Export된 요소를 포함하는 객체입니다.

 

• Default Import

Default Export된 요소를 가져올 때는 이름을 자유롭게 지정할 수 있습니다.

// main.js
import Person from './person.js';

const person = new Person('John');
person.sayHello(); // "Hello, my name is John"

이 예제에서 Person 클래스는 person.js 모듈에서 Default Export로 내보내졌으며, main.js에서 자유롭게 이름을 지정하여 가져왔습니다.

 

• Named Import와 Default Import 혼합 사용

모듈이 Named Export와 Default Export를 모두 포함하고 있는 경우, 이를 혼합하여 가져올 수 있습니다.

// main.js
import Person, { pi, add } from './mathPerson.js';

const person = new Person('John');
person.sayHello(); // "Hello, my name is John"

console.log(pi); // 3.14
console.log(add(2, 3)); // 5

여기서는 Person 클래스는 Default Import로, pi와 add 함수는 Named Import로 가져왔습니다.

 

 

결론

자바스크립트에서 import와 export는 모듈 시스템의 핵심으로, 코드의 재사용성과 유지 보수성을 크게 향상시킵니다. 이러한 기능을 잘 활용하면 복잡한 애플리케이션을 효율적으로 관리하고 확장할 수 있습니다