JavaScript 모듈, import와 export 모듈화하기, 개념, 이점, 예시코드
자바스크립트는 현대적인 웹 개발에서 광범위하게 사용되는 언어 중 하나입니다. 코드의 복잡성을 관리하고 재사용성을 높이기 위해 모듈 시스템은 중요한 역할을 합니다. 이 글에서는 자바스크립트의 import와 export 구문을 사용하여 모듈을 어떻게 만들고 사용하는지에 대해 알아보겠습니다.
모듈의 개념
모듈은 코드를 여러 부분으로 나누고, 이러한 부분을 다른 파일에서 재사용할 수 있게 해주는 자바스크립트의 중요한 개념입니다. 모듈을 사용하면 코드의 구조를 유지하고 유지보수를 쉽게 할 수 있습니다.
export로 모듈 내보내기
먼저, 모듈에서 어떤 것을 다른 파일에서 사용할 수 있도록 내보내는 방법을 알아봅시다. export 키워드를 사용하여 모듈에서 함수, 변수, 클래스 등을 내보낼 수 있습니다.
// myModule.js
export const greeting = "안녕하세요";
export function sayHello() {
console.log("안녕하세요!");
}
위의 코드에서 greeting 변수와 sayHello 함수를 export 했습니다.
import로 모듈 가져오기
다른 파일에서 모듈로 내보낸 내용을 가져오려면 import 구문을 사용합니다. 아래는 모듈에서 내보낸 것을 가져오는 예시입니다.
// 다른 파일에서 모듈 가져오기
import { greeting, sayHello } from './myModule.js';
console.log(greeting); // "안녕하세요"
sayHello(); // "안녕하세요!"
import 구문을 사용하여 greeting과 sayHello를 가져와 사용할 수 있습니다.
기본 내보내기(Default Export)
한 모듈에서 하나의 항목만 내보내는 것이 흔하며, 이를 기본 내보내기(default export)라고 합니다.
// myModule.js
const myVariable = "내 변수";
export default myVariable;
다른 파일에서 기본 내보내기를 가져오려면 중괄호 없이 사용합니다.
// 다른 파일에서 기본 내보내기 가져오기
import myVariable from './myModule.js';
console.log(myVariable); // "내 변수"
모듈화의 이점
모듈을 사용하면 코드를 더 쉽게 유지보수하고 확장할 수 있습니다. 여러 파일 간에 기능을 공유하고 필요할 때 로드할 수 있습니다. 이로써 코드 베이스가 더 구조적이고 효율적으로 관리됩니다.
끝으로
import와 export를 사용하여 자바스크립트 모듈을 만들고 활용하는 방법을 살펴보았습니다. 모듈은 복잡한 프로젝트를 다루는 데 필수적이며, 코드의 재사용성을 높여 생산성을 향상시키는데 도움을 줍니다. 모듈을 적절하게 사용하여 더 깔끔하고 효율적인 코드를 작성할 수 있습니다.
▼ 아래 글도 읽어보세요! ▼
'Programming & Platform > JavaScript' 카테고리의 다른 글
JavaScript includes 간편 사용법, 구문, 예시 코드 (0) | 2023.12.31 |
---|---|
JavaScript <script> 태그의 defer 속성, async와 차이 (0) | 2023.12.30 |
JavaScript Array.From() 메소드 쉽게 사용하기, 예제 소스 코드 제공 (1) | 2023.12.25 |
JavaScript 유사 배열 객체 쉽게 배우기, 예제 소스 코드 제공 (1) | 2023.12.24 |
JavaScript 명시적 this 바인딩, apply 메소드 쉽게 배우기 - 예시 코드 제공 (0) | 2023.12.19 |