require와 import

자바스크립트 개발을 하다 보면 모듈을 불러오는 문법 두 가지 require와 import  가 있고 둘 다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 지니고 있다.
require 은 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다고 한다.

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

 

CommonJS는 JavaScript를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션이나 데스크톱 애플리케이션에서도 사용하려고 조직한 자발적 워킹 그룹이다.

이 그룹은 JavaScript를 범용적으로 사용하기 위해 필요한 '명세(Specification)'를 만드는 일을 한다. 이 그룹에서 현재까지 정의한 명세로는 Module 명세 1.0, 1.1, 1.1.1 등이 있다. Node.js 모듈도 Module 명세 1.0을 따르고 있다.

 

/* CommonJS  */
const name = '고양이';

module.exports = name;Copy

/* ES6 */
const name = '고양이';

export default name;

CommonJS와 ES6라는 모듈 시스템에서는  exports 객체라는 개념이 존재한다.
exports는 모듈로부터 내보내지는 데이터들을 담고 있는 하나의 객체이다.
ES6의 export default 구문이, CommonJS의  module.exports 구문 동작을 대체하기 위한 문법이다.

 

require와 import의 차이점

• require()는 CommonJS를 사용하는 node.js문이지만 import()는 ES6에서만 사용
• require()는 파일에 들어있는 곳에 남아 있으며 import()는 항상 맨 위로 이동
• require()는 프로그램의 어느 지점에서나 호출 할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 있다. (그렇지만 import 전용 비동기 문법으로 파일 중간에 모듈 불러오기를 할 수 있다.
• 하나의 프로그램에서 두 키워드를 동시에 사용할 수 없다
• 일반적으로 import()는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require()보다 성능이 우수하며 메모리를 절약한다.

[ CommonJs 방식으로 사용 시 주의 사항 ]

CommonJs 방식으로 모듈을 내보낼때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다.
특히, 제일 햇갈리는 부분이 바로 유사해 보이는 export 변수와 module.exports 변수를 상황에 맞게 잘 사용해야 한다는 점이다.
1. 여러개의 객체를 내보낼 경우 → export.변수 의 개별 속성으로 할당
2. 딱 하나의 객체를 내보낼 경우 → module.exports = 객체 자체에 할당

 

출처: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와 import는 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 지니고 있습니다. require 은 NodeJS에서 사용되고 있는 CommonJS 키워드이고
import ES6(ES2015)에서 새롭게 도입된 키워드입니다. ES6문법을 사용하지 않는다면 require를 사용해서
외부 코드를  불러와야 할 것입니다. require는 프로그램의 어느 지점에서나 호출 할 수 있지만 import는 파일의 시작 부분에서만 실행할 수 있습니다.  import는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호되지만 require을 사용 시에 성능이 우수하며 메모리를 절약한다고 합니다.

 

require과 import 부분을 공부하면서 자주 들었던 CommonJS와  ES6문법에 대해서도 좀더 알게되었던 것 같다.

import보다 require의 성능이 우수하다는 점에서는 좀더 공부를 해야봐야 할 것 같고 require을 한번 사용해봐야 할 것 같다.