Develop/React.js

[React] CommonJS module / ES module

dawonny 2023. 4. 2. 19:35
728x90
반응형

리액트 스터디를 진행하다가 CommonJS module 과 ES module 이 언급이 되었는데

정리해볼겸 포스팅한다.

자바스크립트는 파일마다 독립적인 Scope(범위)를 가지지 않고 하나의 전역객체를 공유해서 사용한다.

대신 이렇게 되면 전역변수가 중복이 되는 문제가 생길 수 있다.

 

이러한 문제점을 해결하기 위해서 Node.js 에서는 사실상 표준이라고 할 수 있는 CommonJS를 채택하였다.

따라서 각각의 모듈들은 각자의 Scope를 가질 수 있게 되었다.

 

하지만 브라우저에서는 이를 지원하지 않았다.

그래서 ES6에서 이를 해결하기 위해 모듈 기능을 추가하게 되었다.

비교

 

ES Modules

- module loader 를 비동기 환경에서 실행, import / export 구문을 찾아서 파싱

- import  할게 더이상 없을 때까지 import 를 찾음

- package.config 의 "type" : "module" 로 set 해주어야함(default 값이 아님)

 

CommonJS

- default 값임

- require() 는 동기로 이루어짐, promise / callback 을 return 하지 않음

- 즉 require 내부의 script 를 실행하고 export 되어 있는 값을 return 한다.

모듈 내보내고 가져오기

 

CommonJS 의 내보내기

export 와 export default 를 함수명 또는 변수명 앞에 위치시킨다.

 

CommonJS 의 가져오기

import 를 코드 최상단에 작성함으로써 외부에서 module을 가져와 사용한다.

// 모듈 내보내기
function FunctionA() {
  // ...
}

module.exports = FunctionA;

// 모듈 가져오기
const FunctionA = require('./myModule');
const myFunctionA = new FunctionA();

 

ES modules 의 내보내기

export 키워드를 이용해서 모듈을 내보낸다.

export 뒤에 내보내고 싶은 모듈을 작성하는데, export default 모듈이름 도 작성 가능하다.

export 와 export default 의 차이

export default 는 모듈에서 하나의 항목을 기본으로 내보내는 방법이다.
또한 한 모듈에서 export 와 export default 를 함께 사용할 수 있다.
예를 들어 export 로 여러 항목을 내보내고, export default 로 기본항목을 내보내는 방식이다.
// 모듈 내보내기
export const a = 10;
export function myFunc() {
  // ...
}
export default class MyClass {
  // ...
}

// 모듈 가져오기
import { a, myFunc } from './myModule.js';
import MyClass from './myModule.js';​


 

ES modules 의 가져오기

import 를 코드 최상단에 작성함으로써 외부에서 module을 가져와 사용한다.

// 모듈 내보내기
export default function FunctionA() {
  // ...
}

// 모듈 가져오기
import FunctionA from './myModule.js';
const myFunctionA = new FunctionA();

 

 

 

ref: https://velog.io/@ahn0min/CommonJS-vs-ES-modules

728x90
반응형