JavaScript 모듈, import와 export 모듈화하기, 개념, 이점, 예시코드

JavaScript 모듈, import와 export 모듈화하기, 개념, 이점, 예시코드

 

 

자바스크립트는 현대적인 웹 개발에서 광범위하게 사용되는 언어 중 하나입니다. 코드의 복잡성을 관리하고 재사용성을 높이기 위해 모듈 시스템은 중요한 역할을 합니다. 이 글에서는 자바스크립트의 import와 export 구문을 사용하여 모듈을 어떻게 만들고 사용하는지에 대해 알아보겠습니다.

 

 

모듈의 개념

 

JavaScript modules - JavaScript | MDN

 

모듈은 코드를 여러 부분으로 나누고, 이러한 부분을 다른 파일에서 재사용할 수 있게 해주는 자바스크립트의 중요한 개념입니다. 모듈을 사용하면 코드의 구조를 유지하고 유지보수를 쉽게 할 수 있습니다.

 

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); // "내 변수"

 

export - JavaScript | MDN

 

모듈화의 이점

 

모듈을 사용하면 코드를 더 쉽게 유지보수하고 확장할 수 있습니다. 여러 파일 간에 기능을 공유하고 필요할 때 로드할 수 있습니다. 이로써 코드 베이스가 더 구조적이고 효율적으로 관리됩니다.

 

 

끝으로

 

import와 export를 사용하여 자바스크립트 모듈을 만들고 활용하는 방법을 살펴보았습니다. 모듈은 복잡한 프로젝트를 다루는 데 필수적이며, 코드의 재사용성을 높여 생산성을 향상시키는데 도움을 줍니다. 모듈을 적절하게 사용하여 더 깔끔하고 효율적인 코드를 작성할 수 있습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 함수와 메서드 개념, 차이, 활용, 예시코드

 

JavaScript 전역변수와 지역변수의 소개, 특징, 차이점, 예시 코드

 

JavaScript 실시간 시계 - 소스 코드 제공