[JS] require vs import

require vs import (CommonJs와 ES6)

기본적으로 require와 import는 모듈 키워드이다. 외부 파일이나 라이브러리를 불러올때 사용한다.
require는 Node.js에서 사용되고 있는 CommonJS키워드이고, import는 ES2015에서 새롭게 도입된 키워드이다.
둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고 있지만, 다른 문법 구조를 지니고 있다.

const html = require("html");

import test from "test.js";

 

---

require / exports (Common JS)

require는 Common JS 키워드로 (Node.js)변수를 할당하듯 모듈을 불러오는 것이 특징이다.

모듈 전체 내보내고 가져오기

module.exports = 변수명;

const person = {
  name: "chiho",
  age: 20,
  sex: "Male"
};

module.exports = person;

//require (index.js)
const test = require('./test.js');

console.log(test.name); // chiho
console.log(test.age); // 20
console.log(test.sex); // Male

 

모듈 개별 내보내고 가져오기

exports.변수

exports.name = "chiho";
exports.age = 20;
exports.sex = "Male";

const {name, age, sex} = require('./test.js');

console.log(name); // chiho
console.log(age); // 20
console.log(sex); // Male

 

---

import / export (ES6)

ES6에서 새롭게 도입된 키워드이다. import는 모듈의 이름이나 경로를 정적으로 분석하기 때문에 실행시간에 모듈을 가져올 수 없다. 따라서, import는 반드시 최상단에서 선언돼야 한다.

 

모듈 전체 내보내고 가져오기

// 모듈 전체를 export, 파일내 한번만 사용가능하다.
const obj = {
   num: 100,
   sum: function (a, b) {
      console.log(a + b);
   },
   extract: function (a, b) {
      console.log(a - b);
   },
};

export default obj;

// 전체 자체를 import 할 경우 중괄호 없이 그냥 씀
import obj from './exportFile.js';

obj.num; // 100
obj.sum(10, 20); // 30
obj.extract(10, 20); // -10

 

모듈 개별 내보내고 가져오기

// ----------1-------------//
// 멤버를 직접 일일히 export
export const name = 'chiho'; // 변수의 export
export function sayHello() { // 함수의 export
    console.log('Hello World!');
}
export class Person { // 클래스의 export
    constructor(name){
        this.name = name;
    }
}

// ---------------2------------//
// 멤버를 따로 묶어서 export
const name = 'chiho';
function sayHello() {
    console.log('Hello World!');
}
class Person {
    constructor(name){
        this.name = name;
    }
}
export {name, sayHello, Person}; // 변수, 함수, 클래스를 하나의 객체로 구성하여 export

import { name, sayHello, Person } from './exportFile.js';

console.log(name); // chiho
sayHello(); // Hello World!
const person = new Person('inpa');


// ----------------------- OR ----------------------- //


// 개별로 export 된걸 * 로 한번에 묶고 as 로 별칭을 줘서, 마치 전체 export default 된걸 import 한 것 처럼 사용 가능
import * as obj from './exportFile.js'; 

console.log(obj.name); // chiho
obj.sayHello(); // Hello World!
const person = new obj.Person('inpa');

 

---

정리

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

 

---

출처

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