간단한 require vs import에 대한 정리

들어가면서

많은 블로그나 MDN 공식 사이트에 import에 대해 잘 설명이 되어있긴 하지만 내용을 정리하는 차원에서 toy project 진행중 궁금했던점을 vs 형식으로 매우 간략히 정리하였다.

require vs import

require

//react 모듈을 불러옴
const Chicken = require("chicken");

import

//chicken 모듈 내에서 leg, wing, 멤버 or 함수를 불러옴
import { leg, wing } from "chicken";

require와 import는 사용방법이 좀 다를 뿐이지 결국 하는일은 모듈을 불러오는게 아닌가 라고 생각될수 있다. 하지만 아래와 같은 명백한 차이가 존재한다.

선택적인 로드

한가지 생각을 해보자.. chicken 모듈내의 일부분만 가지고 오고 싶다. 그럼 어떻게 해야할까?

require의 경우 선택적인 로드가 불가능하기 때문에 예를 들어 chicken모듈을 불러온다고 생각해보자. require를 사용하다면 아래와 같이 chicken모듈을 불러올것이다.

const Chicken = require(‘chicken’);

chicken 모듈의 내용을 Chicken변수에 저장한다. 그 다음 Chicken변수에 접근하여 필요한 함수를 호출하여 사용할 수 있다.

반면 import를 사용했을때에는 아래와 같이 chicken모듈 내의 일부분만 불러올수 있다.

import {leg, wing} from ‘chicken’;

동기 / 비동기 로딩

require는 기본적으로 동기방식으로 모듈을 불러오지만 import는 비동기방식으로 모듈을 불러온다. 따라서 import가 성능상에 다소 이점이 있다.

특히 html에서 mjs파일을 import로 불러올때 자동으로 defer 옵션이 적용된다.

일반적인 <script>는 script의 fetch, execution이 완료되기 전까지 HTML Parser가 멈춘다.

하지만 자동으로 defer 옵션이 적용되어 fetch와 Parser이 별도로 동작하기 때문에 성능 측면에서 확실히 이득이 있다.

Node.js에서는 import를 사용할 수 있는가?

현 시점에서는 (2020-02-13) 기본적으로 require를 사용하게 되어있다. 물론 Babel을 이용하여 import 구문을 사용할수 있으며 대부분 그렇게 써왔으리라.

하지만 Node 13버전부터는 공식 API문서에 import를 지원하는것으로 되어있다. 다만 package.json에 type:"module"을 추가해주어야한다. 관련 링크

Nodje 13버전을 설치하고 import 구문을 사용하면 아래와 같은 메시지를 볼 수 있다.

(node:15708) ExperimentalWarning: The ESM module loader is experimental. no

아직 실험적인 기능이라는 뜻이며 13버전의 LTS가 릴리즈 된다면 바로 사용이 가능해보인다.

import는 항상 엄격모드

import로 가지고 오는 모듈은 "use strict"가 있던 없던 항상 엄격모드로 동작한다. require과는 또 다른점이다.

마무리

항목	require	import
선택적 로드/별칭	불가능	가능
동기/비동기	동기	비동기
엄격모드	모듈 내부 정의에 따름	import로 로드된 모듈은 항상 엄격모드
Node.js지원유무	기본지원	13버전에서 실험적 기능으로 지원

이렇게 간단하게 import와 require의 차이점을 정리하였다.

참고한 링크

• https://v8.dev/features/modules
• https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer
• https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x