require vs import 문법 비교하기

자바스크립트에서는 모듈을 불러오는 문법이 두가지 가 있다. 

1. (require / exports ) 

2. (import / export)

 

이 둘은 비슷하면서도 달라 가끔 자바스크립트를 사용하면서 혼동을 준다.

 

 

(require / exports) 

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

/* CommonJS  */
const name = require('./module.js');

 

(import / export ) 

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

/* ES6 */
import name from './module.js'

 

require와 import 의 주요 차이점

1. reqiure() 는 CommontJS를 사용하는 node.js문이지만 import는 ES6에서만 사용

2. require()는 파일 (어휘가 아님)에 들어있는 곳에 남아 있으며 import()는 항상 맨위로 이동

3. require()는 프로그램의 어느 지점에서나 호출할 수 있지만 import()는 파일의 시작부분에서만 실행할 수 있다. 

    (그렇지만 import 전용 비동기 문법으로 파일 중간에 모듈 불러오기를 할 수 있다.)

4. 하나의 프로그램에서 두 키워드를 동시에 사용할 수 없다.

5. 일반적으로 import()는 사용자가 필요한 모듈 부분만 선택하고 로드할 수 있기 때문에 더 선호된다. 또 한 require() 
    보다 성능이 우수하며 메모리 절약한다. 

 

 

정리 

require와import는 모두 모듈 시스템으로 CommonJS를 사용하는 것과 ES6을 사용하는 것의 차이입니다.

대표적으로 CommonJS를 사용한 NodeJSsms require을 통해 외부 파일이나 라이브러리를 불러오지만, ES6
모듈 시스템을 사용한 리액트는 import를 통해 라이브러리를 불러옵니다. Babel과 같은 ES6 코드를 변환해주는 도구가 없다면

require 사용해야합니다.

 

Babel 이란?

바벨이란 ES6+ 버전의 자바스크립트, 타입스크립트, jsx 등 다른 언어로 분류되는 언어들에 대해 모든 브라우저에서 동작할 수 있도록 호환시켜주는 툴입니다. 바벨은 최신 문법을 이전 세대 문법으로 호환시켜주는 기능이 있는데 그 중 하나가 JSX문법입니다. JSX를 ES5 코드로 바꿔 브라우저에 작동할 수 있도록 하여 리액트에서 바벨이 사용되빈다. 

 

 

 

 

 

참고

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-require-%E2%9A%94%EF%B8%8F-import-CommonJs%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4-1

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

 

https://codingpracticenote.tistory.com/176

require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요?