[Javascript] 자바스크립트 모듈 (export, import)

JavaScript에서 모듈을 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 다른 파일에서 필요한 기능만 가져다 쓸 수 있다. 자바스크립트 모듈의 기본 개념과 export, import의 사용법을 알아보자.

HTML 파일에서 자바스크립트 모듈을 사용하는 방법

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

 

type="module" 속성을 사용하면, 해당 스크립트 파일이 모듈로 처리된다.

export와 import 사용법

1. 개별 함수 내보내기 및 불러오기

// hello.js 
export function hello1() { 
    console.log("Hello 1!"); 
} 

export function hello2() { 
    console.log("Hello 2!"); 
} 

// main.js 
import { hello1, hello2 } from "./hello.js"; 
hello1(); // Hello 1! 
hello2(); // Hello 2!

 

이 코드는 hello.js에서 두 개의 함수를 export하여 main.js에서 각각 import하는 방식이다. export는 특정 함수나 변수를 모듈 밖으로 내보내는 역할을 하며, import로 다른 파일에서 보낸 함수나 변수를 불러올 수 있다. 이 때 중괄호 { }를 사용하여 필요한 함수만 선택적으로 가져올 수 있다.

 

2. 모듈 전체를 한 객체로 불러오기

// hello.js 
export function hello1() { 
    console.log("Hello 1!"); 
} 

export function hello2() { 
    console.log("Hello 2!"); 
} 

// main.js 
import * as hello from "./hello.js"; 
hello.hello1(); // Hello 1! 
hello.hello2(); // Hello 2!

 

import * as hello를 사용하여 hello.js의 모든 함수를 한 객체(hello)로 불러온다. 이렇게 하면, hello.hello1()처럼 객체의 메서드를 호출하는 방식으로 사용할 수 있다.

export default 사용법

// hello.js 
export default function hello1() { 
    console.log("Hello 1!"); 
} 

// main.js 
import hello1 from "./hello.js"; 
// import { hello1 } from "hello.js" => 에러 발생! 

hello1(); // Hello 1!

 

export default는 모듈에서 하나의 값(함수나 클래스 등)을 디폴트로 내보낼 때 사용한다. export default로 내보낸 함수나 변수는 중괄호 {} 없이 바로 이름만 써서 가져온다. 중괄호를 사용하면 에러가 발생한다.