[JS] 모듈(Module) 기본 사용 방법

모듈(Module)이란 특정 데이터들의 집합(파일)입니다.

JavaScript의 가져오기(Import), 내보내기(Export) 문법을 사용할 수 있습니다.

 

1. 기본 내보내기 (Defualt Export)

// module.js
const value = 1004;
export default value;

// 다른 파일에서 가져오기
import number from "./module.js";

기본 내보내기는 단 한개의 값만 내보낼 수 있으며, 가져올 때 중괄호 없이 이름을 지정하여 가져옵니다.

 

2. 이름 내보내기 (Named Export)

// module.js
export const str = "peter";
export const arr = [];
export function hello() {}

// 다른 파일에서 가져오기
import { str, arr, hello } from "./module.js";

 

3. 이름 변경해서 가져오기

// 다른 파일에서 가져오기 및 이름 변경
import { str as name, arr as array } from "./module.js";

가져올 때 가져올 변수의 이름을 변경하여 사용할 수도 있습니다.

 

4. 별칭(Alias) 사용하기

// 다른 파일에서 가져오기 및 별칭 사용
import { str as name } from "./module.js";

가져올 변수나 모듈의 이름을 원하는 별칭으로 지정하여 사용할 수 있습니다.

 

 

[주의사항]

 

Module 코드는 가장 상단에 위치해야 합니다.

import number, {str, arr, hell} from "./module.js";

 

JavaScript 모듈 시스템은 코드의 구성과 재사용을 도와주는 중요한 개념 중 하나입니다. 모듈을 사용하면 코드를 더욱 체계적으로 관리하고 필요한 부분을 재사용할 수 있습니다.