require과 import의 차이

원래 기존까지는 Node.js 개발 환경에서 모듈을 불러올 때 기존의 자바스크립트가 지원하는 방식대로 require / exports 를 사용했다. 그러나 React나 Vue를 쓴 코드에서는 import react from 'react'와 같이 모듈을 export로 정의하고 import로 불러오는 코드들을 볼 수 있었다.

require / exports 는 기존까지 Node.js에서 사용되던 CommonJs 모듈 방식으로, module.exports 객체에 모듈 전체를 치환하여 내보내고, require을 통해 해당 모듈을 불러오는 방식이다. 따라서 CommonJs 모듈 방식으로는 전체 모듈을 다 불러오게 되고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없다.

때문에 ES6(ECMA2015)부터는 import / export 라는 방식으로 모듈을 불러오고 내보낸다. ES 모듈의 import는 require과는 다르게

import {name} from 'module'
과 같이 모듈내에 정의된 특정한 부분만을 불러올 수 있다.

자세한 import와 export에 대한 설명은 링크로 대체한다.

다른 ES6 문법들, 이를테면 let이나 const, arrow function 등이 Node.js 상에서 정상적으로 작동하기 때문에, ES 모듈도 당연히 불러올 수 있을 거라고 생각했지만, Node.js에서 import를 사용하니 ES 모듈을 불러올 수 없다는 오류가 발생했다.

여러 자료들을 찾아본 결과, Node.js가 최신 자바스크립트 문법들은 지원하지만, 모듈 시스템으로 CommonJs를 채택했기 때문에 ES 모듈 시스템은 사용할 수 없다고 한다.