JavaScript - Export와 Import

1️⃣ export, import와 모듈 관리

 

export와 import를 통해 코드를 여러 파일로 분할하고 필요한 부분만 가져와서 사용할 수 있다.

(=코드의 재사용성을 높이고 유지보수를 용이하게 할 수 있다)

 

2️⃣ export

 

export는 모듈에서 외부로 내보내기 위해 사용

함수, 변수, 클래스 등을 내보낼 수 있다. export를 앞에 붙여서 내보내려는 항목을 지정

 

예시

// 모듈에서 변수 내보내기
export const name = 'John';

// 모듈에서 함수 내보내기
export function sayHello() {
  console.log('Hello!');
}

// 모듈에서 클래스 내보내기
export class MyClass {
  constructor() {
    // ...
  }
}

 

3️⃣ import 

 

import는 다른 모듈에서 내보낸 항목을 가져오기 위해 사용

import 키워드를 사용하여 다른 모듈에서 내보낸 항목을 가져올 수 있다.

가져온 항목은 변수에 할당하거나 원래 이름으로 직접 사용할 수 있다.

 

예시

import { name, sayHello, MyClass } from './module';

// 가져온 항목 사용하기
console.log(name);
sayHello();
const instance = new MyClass();

 

 

4️⃣ script 태그 추가

 

html에 script 태그 추가 및 type을 module로 설정

// html
<script type="module" src = "(js파일경로)"></script>