[javascript] ES6 모듈을 사용할 때 사용되는 export와 import 문법에 대해 알려주세요.

18 Dec 2023

javascript

ES6(ECMAScript 2015)에서 도입된 모듈 시스템은 JavaScript에서 코드를 조직화하고 재사용성을 높이는 데 도움을 줍니다. 이를 위해 export와 import 키워드가 사용됩니다.

export

export 키워드는 다른 파일에서 사용할 수 있도록 모듈에서 함수, 변수, 클래스를 내보내는 데 사용됩니다.

단일 항목 내보내기

// 모듈 파일
// named export
export function myFunction() {
  // 함수 내용
}

// 또는
function myFunction() {
  // 함수 내용
}
export { myFunction };

// default export
export default function() {
  // 디폴트로 내보낼 함수 내용
}

여러 항목 내보내기

// 모듈 파일
export function function1() {
  // 함수 내용
}

export function function2() {
  // 함수 내용
}

// 또는
function function1() {
  // 함수 내용
}
function function2() {
  // 함수 내용
}
export { function1, function2 };

import

import 키워드는 다른 모듈에서 export한 함수, 변수, 클래스를 가져올 때 사용됩니다.

단일 항목 가져오기

// 모듈 파일
import { myFunction } from './myModule';
// myFunction 사용

여러 항목 가져오기

// 모듈 파일
import { function1, function2 } from './myModule';
// function1과 function2 사용

모든 항목 가져오기

// 모듈 파일
import * as myModule from './myModule';
// myModule.function1, myModule.function2 등 사용

모듈 내부에서는 default export의 경우 이름을 바꿀 수 있습니다.

// 모듈 파일
import myFunction from './myModule';
// myFunction 사용

이것이 ES6에서 사용되는 export와 import의 기본적인 사용법입니다. 이를 통해 모듈 단위로 코드를 구성하고, 필요한 기능을 다른 파일에서 활용할 수 있습니다.

더 많은 자세한 내용은 MDN web docs, JavaScript.info 등을 참고할 수 있습니다.