[JavaScript] import와 export 사용법 (as 키워드 사용법 포함)

날짜:

1. export 사용법

자바스크립트에서 export 키워드는 모듈을 외부로 내보내기 위해 사용된다. 이를 통해 다른 파일이나 모듈에서 해당 모듈의 기능을 사용할 수 있게 된다. export 키워드는 다양한 형태로 사용될 수 있으며, 각각의 사용법은 아래와 같다.

개별 내보내기 (Named Exports)

개별 내보내기는 모듈 내에서 여러 개의 기능을 각각 내보내는 방식이다. 각 기능은 이름을 가지며, 이 이름을 통해 외부에서 접근할 수 있다.
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}
add와 subtract 함수는 각각 개별적으로 내보내진다. 다른 파일에서 이 함수를 사용할 때는 동일한 이름으로 가져와야 한다.

기본 내보내기 (Default Exports)

기본 내보내기는 모듈에서 하나의 기능만을 내보내는 방식이다. 기본 내보내기는 이름이 없으며, 외부에서 이 모듈을 임의의 이름으로 가져올 수 있다.
// calculator.js
function multiply(a, b) {
  return a * b;
}
export default multiply;
multiply 함수는 기본으로 내보내진다. 다른 파일에서 이 함수를 가져올 때는 임의의 이름을 사용할 수 있다.



2. import 사용법

import 키워드는 외부 모듈의 기능을 현재 파일로 가져오기 위해 사용된다. 이를 통해 코드의 재사용성을 높이고 모듈 간의 의존성을 관리할 수 있다. import 키워드에는 다양한 사용 방식이 있으며, 각각의 사용법은 다음과 같다.

개별 가져오기 (Named Imports)

개별 가져오기 방식은 모듈에서 내보낸 특정 기능을 이름을 통해 가져오는 방법이다. 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.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
이 예제에서 main.js는 math.js에서 내보낸 add와 subtract 함수를 각각 가져와 사용한다.

기본 가져오기 (Default Imports)

기본 가져오기 방식은 모듈에서 기본으로 내보낸 기능을 가져오는 방법이다. 기본 내보내기는 하나만 존재할 수 있으며, 가져올 때는 임의의 이름을 사용할 수 있다.
// calculator.js
function multiply(a, b) {
  return a * b;
}
export default multiply;

// main.js
import multiply from './calculator.js';

console.log(multiply(2, 3)); // 6
이 예제에서 main.js는 calculator.js에서 기본으로 내보낸 multiply 함수를 가져와 사용한다.

전체 가져오기 (Importing the Whole Module)

전체 가져오기 방식은 모듈의 모든 기능을 객체 형태로 가져오는 방법이다. import 문에서 * as 구문을 사용하여 모듈 전체를 가져올 수 있다.
// math.js
export function add(a, b) {
  return a + b;
}

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

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

console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2
main.js는 math.js의 모든 내보낸 기능을 math 객체로 가져와 사용한다.

별칭 사용하기 (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.js';

console.log(addition(2, 3)); // 5
console.log(subtraction(5, 3)); // 2
이 예제에서 main.js는 math.js에서 내보낸 add 함수를 addition이라는 이름으로, subtract 함수를 subtraction이라는 이름으로 가져와서 사용하는 것을 볼 수 있다.