[JavaScript] require/exports 와 import/export 차이

require/exports

require/exports 방식은 기존에 Node.js 에서 사용되던 CommonJS 모듈 방식으로, module.exports 객체에 모듈 전체를 담아 내보내고 require를 통해 해당 모듈을 불러오는 방식이다.

따라서 require를 사용하면 모듈 전체를 불러오게 되는데, 불필요한 모듈이 로드되기도 하고 어떤 부분을 모듈 내에서 사용했는지 알 수 없다.

import/export

import/export 방식은 ES6에 새로 등장한 ES 모듈 방식으로, import를 사용해 모듈을 가져온 뒤 만든 객체를 내보내기 위해 export를 사용하는 방식이다.

실제로 쓰이는 부분만 불러와 사용하기 때문에 메모리를 절약할 수 있다.

 

export 를 사용하는 방식은 require와는 약간 다르다.

- 단일 객체 내보내기 : export default

export default variable

- 복수 객체 내보내기 : export

두 개 이상을 내보낼 때는 { } 로 묶어서 export 하거나 각 변수명 앞에 export를 붙여주면 된다.

let myVar = "myVar 변수";
let myVarArray = ["안녕하세요", "Ron입니다."];

export { myVar, myVarArray }

export let myVar = "myVar 변수";
export let myVarArray = ["안녕하세요", "Ron입니다."];

참고) JavaScript와 Node.js의 공식 모듈 방식

JavaScript에서는 ES 모듈을 공식 모듈로 사용하고 있고, Node.js에서는 CommonJS 모듈을 공식 모듈로 사용하고 있다.

따라서 Node.js에서는 import/export 방식을 바로 사용할 수 없다.

Node.js에서 import/export 방식을 사용하려면 Babel이라는 별도의 도구가 필요하다. 

Node.js 13.2버전부터는 package.json 파일에 type 항목을 module로 설정하면 손쉽게 ES 모듈을 사용할 수 있게 되었다.

결론

require 는 기존 JavaScript에 사용된 CommonJS 모듈 방식에서 모듈 전체를 불러올 때 사용하는 키워드이다. 모듈 전체를 불러오기 때문에 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지 알 수 없다는 단점이 있다.

import 는 ES6에 도입된 ES 모듈 방식에서 모듈을 불러올 때 사용하는 키워드이다. 모듈 내에서 어떤 부분을 사용했는지 쉽게 알 수 있고, 실제로 사용하는 부분만 불러와 사용하기 때문에 메모리를 절약할 수 있어 require보다 성능이 좋다.