[JS] ES6 - Modules

aiden Lee·2021년 7월 31일

ES6

목록 보기

8/8

Import 와 Export 는 자바스크립트의 코드를 모듈화 할수 있는 기능입니다.
다른 파일에 있는 자바스크립트를 특정 파일로 가져와 사용하는 의미 입니다.

<!-- index.html -->
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
</body>

// a.js
var test = 10;
function func() {
  return test; 
}

// b.js
var test = 20;

위의 경우 유효범위가 전역으로 잡히기 때문에 값이 변하게 됩니다. 모듈화 패턴이나 라이브러리를 사용하여 해결 했지만 이제는 자바스크립트 언어 자체에서
모듈화를 지원합니다.

export 변수, 함수

다른 파일에서 가져다 쓸 변수나 함수 앞에 export 를 작성하면 Import 를 통해서 사용할 수 있습니다.

import { 불러올 변수, 함수 } from '파일경로'

// app.js
import { test, func } from './test.js';
console.log( test ); // 10
console.log(func); // 30

// test.js
var test = 10;
function func() {
   return 30;
}
export { test, func };

웹팩과 같은 모듈 번들러를 이용하여 ES6 구문을 사용해야 합니다.

Hello!