import from vs const require

개발을 하다보면 모듈을 불러올 때 이 두가지를 마주하는 경우가 많다.

뭔가 다른 것 같고, 또 실제로 혼용하거나 잘못 사용하면 에러가 나는 경우가 다반사이다.

하지만 뭔지도 모르고 그냥 지나쳐서 사용했던 이 두 친구들을 정리해보려 한다.

구세대 require 와 신세대 import

Import

더 최신 스펙인 ES6 모듈 시스템을 사용하는 import 는

1. import, from, export, default 와 같이 모듈 관리 전용 키워드를 사용해

   가독성이 좋다.

2. 비동기 적으로 작동한다

3. 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서

   유리하다.

4. Named Parameter

복수 객체 내보내기/불러오기

내보내기 - export

ES6 에서는 import 키워드의 짝궁인 export 키워드를 사용하여 내보낼 객체들을 명시해준다.

이는 내보내는 함수나 변수의 이름이 export 이후 그대로 사용되기 때문에

Named Exports 라고 한다.

const exchangeRate = 0.91;

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

// 내보내기 1
export function canadianToUs(canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
}

// 내보내기 2
const usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate);
};
export { usToCanadian }

불러오기 - import

여러 객체를 불러올 때는
1. 선택적으로 필요한 객체만 불러오거나
2. 모든 객체에 별명을 붙이고 그 별명을 통해서 접근
두 가지 방법을 사용한다

import { canadianToUs } from "./currency-functions";

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(canadianToUs(50));

// Alias
import * as currency from "./currency-functions";

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

단일 객체 내보내기/불러오기

내보내기 - export default

const exchangeRate = 0.91;

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

// 내보내기
export default {
  canadianToUs(canadian) {
    return roundTwoDecimals(canadian * exchangeRate);
  },

  usToCanadian: function (us) {
    return roundTwoDecimals(us / exchangeRate);
  },
};

위의 코드를 다음과 같이도 쓸 수 있다

const obj = {
  canadianToUs(canadian) {
    return roundTwoDecimals(canadian * exchangeRate);
  },
};

obj.usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate);
};

export default obj;

마무리

import export 를 하면서 가장 헷갈리던 부분은
1. import { name } from "./"
2. import name from "./"
위 두 가지 중 어떤 것을 사용할지 였다.
글을 정리하면서 위에 대해서 생각한 내용을 정리하는 것으로 마무리하려 한다.

1 의 경우 {} 속에 객체를 둔 것은 export 시에
export = { name, age, height } 와 같이 다중으로 export 했기 때문에
import 시에 객체 속에 각 함수를 명시해서 불러와야 한다.
반면 2 의 경우
export default = obj 와 같이 obj.name, obj.age 처럼 함수를 하나의 obj 객체에 넣어서
내보낸 경우 그 객체 자체를 사용하면 되기 때문에
import name from 을 사용하는 것이다.
아직 명확하게 정리되진 않았지만 어느정도 방향성은 잡힌 것 같다. 앞으로 개발을 하면서
틀린 부분이 있다면 내용을 보강해 나아가야겠다.

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

https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x