[JavaScript]import와 require의 차이

오늘 자바스크립트로 모듈을 불러오는 코드를 작성하는 도중 import가 작동하지 않는 오류를 발견햇습니다. 구글링을 해본 결과 모듈을 불러오기 위해서 import와 require을 사용하는데 차이 점이 있었습니다. 오늘은 그 차이점에 대해서 정리하고자 합니다.

require와 import는 모듈 키워드로 외부 파일이나 라이브러리를 불러올 때 사용합니다. require는 NodeJS에서 사용되고 있는 CommonJS의 키워드이고, import는 ES2015에서 새롭게 도입된 키워드입니다.

import

JS의 ES6 문법으로 다른 패키지 안에 있는 클래스, 메소드, 변수 등의 데이터를 사용하고자 할 때 쓰는 키워드입니다.
import를 사용해 모듈을 가져온 뒤 만든 객체를 내보내기 위해서는 export를 사용하는데 require와는 약간 다릅니다.

단일 객체 내보내기

export default = variable

복수 객체 내보내기

export variable

require

CommonJS에서 사용하는 모듈을 불러오는 키워드입니다.

단일 객체 내보내기

module.exports = variable

복수 객체 내보내기

exports.variable = variable

정리

두 키워드 모두 동일한 목적을 가지고 있지만다른 문법구조를 가지고 있다는 것을 알 수 있었으며, Babel과 같은 ES6 코드를 변환해주는 도구 없이는 import키워드를 사용할 수 없어 require 키워드를 사용해야합니다.

예시로 번들링을 위해 사용하는 webpack은 node.js 환경에서 구동하므로 require을 사용해야 합니다. 하지만 리액트 라이브러리를 사용할 때는 import구문이 사용이 가능합니다. 그 이유는 babel에서 imoprt 구문을 require 구문으로 변환해 주기 때문입니다.