[JS] import와 require의 차이

자바스크립트를 사용해서 프로젝트를 진행하다가 어떤 모듈을 불러오기 위해 import를 사용했지만 에러가 뜨면서 require를 사용하라고 메세지가 뜬적이 있다.

 

그 둘의 차이를 알아보자.

 

require 사용법

import 사용법

 

기본적으로 import와 require는 모듈 키워드이다. 즉 외부 파일이나 라이브러리를 불러올 때 사용한다.

 

다만 require는 NodeJS에서 사용하고 있는 CommonJS 키워드이고 import는 ES2015에서 새롭게 도입된 키워드이다.

둘 다 같은 목적을 가지고 있지만 위 이미지처럼 다른 문법 구조를 지니고 있다.

 

요새는 ES6가 많이 쓰여 import가 주로 사용되고 있지만 <script> 태그를 사용하는 브라우저 환경이나, CommonJS를 기본으로 채택하고 있는 NodeJS 등이 있기 때문에 100% import로 대체되기는 어렵다. 

 

따라서 Babel과 같은 ES6 코드를 변환해주는 도구를 사용하지 않는다면 require 키워드를 사용해야한다.