require vs import

모듈 시스템 4가지

• CommonJS (이하 CJS) – NodeJS 환경을 위해 만들어진 모듈 시스템
• ES Module (이하 ESM) – ES6 에 도입된 자바스크립트 모듈 시스템
• AMD – 가장 오래된 모듈 시스템, require.js 라이브러리를 통해 개발됨
• UMD – AMD와 CommonJS 등 모듈 시스템을 함께 사용하기 위해 개발됨

 

모듈 내보내기, 불러오기

• CJS : require, module.exports, exports
• ESM : import, export, export default

---

CommonJS 문법

• require : 가져오기
• exports : 내보내기
• module.exports : 내보내기

 

require 특징

1. NodeJS 에서 사용하고 있는 CommonJS 모듈 키워드
2. 루비 언어 방식과 비슷함
3. 파일 어느 지점에서든지 호출 가능
   • require() : module.exports 를 리턴함
   • exports 는 module.exports 를 refer 한 것이고, shortcut 에 불과함

 

require를 사용하는 경우

1. Node.js 환경에서 사용되는 모듈 시스템(CommonJS)을 사용하는 경우
2. 코드를 동기적으로 로드하고 실행할 필요가 있는 경우
3. 모듈 전체를 가져와야 하는 경우
4. ES6 모듈이 아닌 다른 모듈 포맷을 사용하는 경우

// CommonJS style using require
const express = require('express'); // Node.js에서 널리 사용되는 모듈 시스템
const myModule = require('./myModule'); // 코드를 동기적으로 로드할 필요가 있을 때
const utils = require('./utils'); // 모듈 전체를 가져와야 하는 경우

---

ES6 문법

• import : 가져오기
• export : 내보내기
• export defaults : 내보내기

 

import 특징

1. ES6에서 새롭게 도입된 키워드
2. 자바와 파이썬 언어 방식과 비슷함
3. 파일 시작 부분에서만 호출 가능
4. 필요한 모듈 부분만 선택하고 로드할 수 있어 더 선호함
5. require() 에 비해 성능이 우수하며 메모리 절약

 

import를 사용하는 경우

1. ES6 모듈 시스템을 사용하는 경우
2. 비동기적으로 모듈을 로드하고 실행할 수 있는 경우
3. 필요한 부분만 가져올 수 있는 경우
4. TypeScript 등의 다른 언어에서 사용되는 모듈 시스템

// ES6 style using import
import React from 'react'; // ES6 모듈 시스템을 사용할 때
import { useState, useEffect } from 'react'; // 필요한 부분만 가져올 수 있을 때
import('./myModule').then(myModule => { // 비동기적으로 모듈을 로드할 수 있을 때
  // 로드된 모듈 사용
});

💡 주의사항
출력할 때 export(ES6)와 exports(CommonJS)를 헷갈리지 않도록 주의해야 한다.

 

결론적으로, require는 Node.js에서 널리 사용되는 CommonJS 모듈 시스템을 사용하고 동기적으로 모듈을 로드할 때 유용하다.

반면에 import는 ES6 모듈 시스템을 사용하고 비동기적으로 모듈을 로드할 수 있으며 필요한 부분만 가져올 수 있어 유용하다.

 

 

---

출처

https://inpa.tistory.com/entry/NODE-📚-require-⚔️-import-CommonJs와-ES6-차이-1

https://rading.kr/programming/javascript/nodejs/3181/

https://stackdiary.com/require-vs-import-in-javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://hacktam.kr/etclec/5?page=5

https://www.daleseo.com/js-module-require/

https://www.daleseo.com/js-module-import/

https://baeharam.netlify.app/posts/javascript/module