ES6 Modules 기본
✔️ 모듈은 재사용 가능한 코드 조각을 캡슐화💊 하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게 해준다.
💊 캡슐화 ?
- 자바스크립트 모듈은 관련된 함수, 변수, 객체, 클래스 등을
하나의 파일로 그룹화하고, 이를모듈이라 함.
기능적으로 연관된 코드들을묶어 관리할 수 있음.
모듈 외부에서는 내부 구현을 알 필요 없이 제공되는 API를 통해 모듈을 사용할 수 있음.
모듈의 기본 및 사용방법
모듈의 기본
- ES6에서는
export키워드를 사용하여 모듈을 만들고 다른 파일에서 사용할 수 있게 한다. - 모듈은
재사용할 수 있는 함수, 객체 또는 원시 값을 의미.
잠깐!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- 자바스크립트의 실행 환경은 브라우저 환경과 Node 환경이 존재.
- Node 환경에서의 모듈 import 방식은
CommonJS방식과ES6방식이 있음.- 지금부터 할 React 개발 환경은 대부분
ES6에서 제시한 방법을 사용
모듈의 사용방법
import 구문을 사용하여 다른 파일에서 함수를 불러와 사용
// app.js
import { add, multiply, ONE, sample } from './math.js';
console.log(add(2, 3)); //5
console.log(multiply(2, 3)); //6
console.log(ONE); //1
console.log(sample.two); //2모듈 사용 이유 ⭐
- 명확한 종속성 관리
- 전통적으로
script 태그를 사용하여 자바스크립트 파일을 로드하는 방식은 스크립트 파일 간의 종속성과 로딩 순서를 수동으로 관리
-> 프로젝트의 규모가 커질수록 종속성을 추적하고 관리하기 어려워지고 실수로 인한 버그 발생 가능성을 높임.
<!-- 전통적인 스크립트 로딩 방식 -->
<script src="jquery.js"></script>
<script src="plugin.js"></script> <!-- 이 스크립트는 jquery.js에 의존 -->
<script src="app.js"></script> <!-- 이 스크립트는 plugin.js와 jquery.js에 의존 -->모듈 시스템을 사용 => 각 모듈이 필요로 하는 종속성을 내부적으로 선언하므로, 개발자는 파일을 로드하는 순서에 신경 쓸 필요가 없음.- 모듈 로더(예: Webpack, Rollup)가 이러한 종속성을 해석하고 올바른 순서로 스크립트를 묶어준다.
// ES6 모듈 사용 예시
import $ from 'jquery';
import plugin from 'plugin'; // 자동으로 jQuery에 대한 의존성을 처리
import app from 'app'; // 모든 의존성이 충족되면 실행
- 코드 캡슐화, 충돌 방지
-
모듈은 자체적인 스코프를 가짐
=> 모듈 외부에서는 모듈 내부의 변수에 직접 접근할 수 없음.
==> 변수의 오염 방지, 이름 충돌 방지 -
여러 스크립트에서 동일한 함수명을 사용하더라도 묘듈을 사용하면 각 스크립트에서 정의된 합수는 해당 모듈 내에서만 유효 => 팀작업이 편리!?
// module1.js
export function conflictFunction() {
console.log('Module 1의 함수');
}
// module2.js
export function conflictFunction() {
console.log('Module 2의 함수');
}
// app.js
import { conflictFunction as function1 } from './module1';
import { conflictFunction as function2 } from './module2';
function1(); // "Module 1의 함수"
function2(); // "Module 2의 함수"
- 효율적인 코드 로딩
- 필요한 기능만을 선택적으로 불러옴 => 애플리케이션의 초기 로딩 시간 단축
코드 스플리팅=> 사용자의 현재 요구에 따라 필요한 코드만 동적으로 로드 가능- 이러한
지연 로딩(lazy-loding)은 대규모 애플리케이션에서 성능과 자원 사용을 최적화하는 데 매우 효과적
고급 모듈 기능
1. 이름 바꾸기와 기본 내보내기
1-1. 별칭 사용
import시 특정 요소에 별칭을 지정하여 충돌을 방지하거나 명확성을 높일 수 있다.
import { square as sqr } from './utils.js';
console.log(sqr(4)); // 161-2. 기본 내보내기와 가져오기
- 한 모듈에서 하나의 기본 값을 내보내고 이를 쉽게 가져올 수 있다.
모듈당 하나의 주요 기능을 내보낼 때 유용하다.export default를 통해 내보내진 모듈은 import시 이름변경 가능
특정 경로에서 가져온import값은 하나만 존재 => 이름을 명시하지 않아도 특정할 수 있음
// math.js
export default function multiply(x, y) {
return x * y;
}
// app.js
import multiply from './math.js';
console.log(multiply(6, 7)); // 42
// export default 시 모듈이름 변경은 자유!
// utils.js
export default function square(x) {
return x * x;
}
// main.js
import mySquare from './utils.js';
console.log(mySquare(4)); // 출력: 162. 전체 모듈 내용 가져오기
- 모듈의 모든 내보내기를 한 번에 가져올 때 사용
// app.js
import * as MathFunctions from './math.js';
console.log(MathFunctions.add(10, 5)); // 15
console.log(MathFunctions.multiply(10, 5)); // 50