React - require vs import (22.11.09 TIL)

vscode 로 작업을 하던 도중, import 를 시도하면 자꾸 require 로 불러와졌다. 강의대로 import 를 사용하긴 했지만 require 와 import 의 차이점은 알고 싶어 정리하는 글이다.

require / exports 는 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다.

import / export 는 ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다.

원래 기존까지는 Node.js 개발 환경에서 모듈을 불러올 때 기존의 자바스크립트가 지원하는 방식대로 require / exports 를 사용했었다고 한다. require / exports 는 각각 불러오고(require) 내보내는(exports) 역할인데, 기존까지 Node.js에서 사용되던 CommonJs 모듈 방식으로, module.exports 객체에 모듈 전체를 치환하여 내보내고, require을 통해 해당 모듈을 불러오는 방식이다.

const utils = require('utils');

module.exports.utils = { ... };  // named exports
module.exports = { ... }         // default exports

CommonJS와 ES6라는 모듈 시스템에서는 exports 객체라는 개념이 존재한다. exports는 모듈로부터 내보내지는 데이터들을 담고 있는 하나의 객체이다. 우리가 함수를 내보낼 때 사용하는 'export default~' 구문이 CommonJS 의 module.exports 와 같다.

CommonJs 모듈 방식으로는 전체 모듈을 다 불러오게 되어 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없다.

ES6(ECMA2015)부터는 import / export 라는 방식으로 모듈을 불러오고 내보낸다. ES 모듈의 import는 require 과는 다르게 아래 코드와 같이 모듈내에 정의된 특정한 부분만을 불러올 수 있다. 사용자가 필요한 모듈 부분만 선택하고 로드할 수 있는 것이다.

import Greeting from './Greeting';

 

*참고로 Node.js 는 최신 자바스크립트 문법들은 지원하지만, 모듈 시스템으로 CommonJs를 채택했기 때문에 ES 모듈 시스템은 사용할 수 없다고 한다.

 

 

참고 :

JavaScript import vs require

[NODE] 📚 require vs import 문법 비교 (CommonJS vs ES6)

 

require와 import 차이