[JavaScript] 모듈

모듈이란 코드를 모아둔 하나의 파일로, 재사용성 및 유지 보수성을 위해 사용된다. 모듈을 구성하는데 절대적인 원칙은 없지만, 일반적으로 큰 목적 하나를 달성하기 위한 관련 조각 코드들, 또는 관련된 기능들의 모둠, 하나의 클래스 등으로 구성된다.

 

모듈 사용법

모듈은 import와 export 명령어를 사용해 서로 다른 파일에서 해당 모듈을 가져다 쓸 수 있게끔 가져오거나, 내보낼 수 있다.

 

export

기존에 작업하던 파일과 동일한 위치에 hello.js 파일을 만들고, 다음 코드와 같이 인사말을 출력하는 함수를 작성한다. 이때 작성한 함수를 내보내기 위해서 function 키워드 앞에 export 명령어를 붙인다.

export function greeting() {
	console.log('Hello');
    }

 

import

이제 해당 파일을 사용하기 위해서 index.html 파일의 body 태그 내부에 있는 기존의 script 파일 부분에 type="module" 속성을 추가한다. 그럼 greeting()을 import 해 사용할 수 있다.

<script type="module" src="script.js"></script>

import { greeting } from "./hello.js";

greeting();

 

export default, named

export를 하는 방식은 기본 내보내기 방식과 이름이 정의된 내보내기 방식으로 구분할 수 있다.

 

이름이 정의된 내보내기

함수나 변수, 클래스 등의 선언 키워드 앞에 export를 붙이는 방법은 이름이 정의된 내보내기 방식이다. 이름이 정의된 내보내기 방식을 사용하면, 모듈 하나에서 여러 개의 함수, 객체, 변수 등을 내보낼 수 있으며, {} 괄호 안에 가져오려는 이름을 작성하여 모듈을 가져올 수 있다.

export fucntion greeting() {
	console.log('hello');
    }
    
import { greeting } from "./hello.js";

 

기본 내보내기

모듈에서 단 하나의 함수, 객체, 변수 등을 내보내고자 할 때 사용하는 방식으로, 선언 키워드 앞에 export default를 붙인다. 이름이 정의된 내보내기와는 다르게 {} 괄호를 생략하고 해당 모듈이 내보내는 대상을 사용하려는 이름만 작성하면 된다.

 

선언 이후 내보내기

이름이 정의된 내보내기

function greeting() {
	console.log('hello');
    }
    
export { greeting };

 

기본 내보내기

function greeting() {
	console.log('hello');
    }
    
export default greeting;