[JavaScript] 모듈 (import / export)

모듈이란?

코드의 일부를 논리적으로 분리하고 구조화할 때, 각각 분리된 단위를 모듈(Module)이라 한다.

 

 

모듈화가 필요한 이유

• 코드의 재사용 : 비슷한 기능이나 관련된 기능들을 모듈로 분리하여 필요한 곳에서 재사용할 수 있다.

 

• 코드의 구조화 : 프로그램을 여러 개의 독립적인 모듈로 나누어 각 모듈이 특정 역할을 담당하도록 분리함으로써 코드의 구조를 개선하고 유지보수를 용이하게 한다.

 

• 네임스페이스 관리 : 모듈을 사용함으로써 전역 네임스페이스 충돌을 방지하고 각 모듈에서 정의한 변수, 함수, 객체 등을 별도의 네임스페이스로 유지할 수 있다.

 

• 코드의 숨김 : 필요한 기능을 외부에 노출시키지 않고 private하게 유지하여 정보 은닉과 캡슐화를 구현할 수 있다.

 

---

모듈 export

모듈을 내보내는 방법은 export와 export default 2가지가 있다.

 

• export

여러 항목을 개별적으로, 또는 한 번에 내보낼 수 있다.

// 모듈에서 함수와 변수를 내보내기
export function add(a, b) {
  return a + b;
}

export const multiply = (a, b) => {
  return a * b;
};

 

 

• export default

모듈이 기본적으로 내보내는 항목을 지정해서 내보낼 수 있지만, 모듈 당 한 번만 사용할 수 있다.

// 모듈에서 객체를 기본적으로 내보내기
const myModule = {
  greet: () => {
    console.log('Hello!');
  },
  calculate: (x, y) => {
    return x * y;
  }
};

export default myModule;

 

---

모듈 import

• require

CommonJS 스타일에서 모듈을 가져올 때 사용하는 문법으로, 주로 Node.js 환경에서 사용된다.

// 위 코드의 myModule을 import할 때
const myModule = require('./myModule');

 

• import

브라우저 환경이나 ES6 문법에서는 import문을 통해 모듈을 가져온다.

// export된 항목들을 가져오는 방법
import { add, multiply } from './myModule';

// export default된 항목을 가져오는 방법
import myModule from './myModule';