📍 import

JS의 ES6 문법으로 다른 패키지 안에 있는 클래스, 메소드, 변수 등의 데이터를 사용하고자 할 때 쓰는 키워드이다.

특징

• ES6 문법
• 메모리 절약
• 필요한 모듈 부분만 선택하고 로드 가능
• Java나 Python 언어 방식과 비슷함

문법

const variable = require('variable');
const { readFile } = require('fs');

객체 내보내기

1. 단일 객체 내보내기
   export default = variable
2. 복수 객체 내보내기
   export variable

📍 require

CommonJS에서 사용하는 모듈을 불러오는 키워드이다.

특징

• CommonJS 문법
• Ruby 언어 방식과 비슷함

문법

import variable from 'variable';
import { readFile } from 'fs';

객체 내보내기

1. 단일 객체 내보내기
   module.exports = variable
2. 복수 객체 내보내기
   exports.variable = variable

📍 import vs require

1. 호출 위치

import

파일 시작 부분에서만 호출 가능

require

파일 어느 지점에서든지 호출 가능

2. 동기/비동기 로딩

import

비동기적으로 모듈을 로드함
→ 종속성 관리에 신경써야 하지만 성능에 미치는 영향↓

require

동기적으로 모듈을 로드함
→ 종속성 관리에 용이하지만 성능 악영향 가능성↑

3. 정적/동적 로딩

import

정적으로 모듈을 로드하지만 조건에 따라 동적으로 불러오는 것은 불가능하다.
최상위 범위에서만 사용할 수 있으며, 코드 분석 및 최적화에 유리하다.

require

동적으로 모듈을 로드할 수 있으며 실행 중에 필요한 모듈을 조건에 따라 불러올 수 있다.

4. 모듈 캐싱

import

모듈을 캐싱하여 성능에서 이점을 얻을 수 있다.

require

모듈을 캐싱하며 다시 불러올 때 새로운 객체를 생성하지 않는다.
이를 통해 성능을 향상시킬 수 있다.

5. 파일 확장자

import

Node.js 버전 및 설정에 따라 명시적으로 파일 확장자를 지정해야 할 수도 있다.

require

파일 확장자를 생략할 수 있다.
Node.js는 기본적으로 .js, .json, .node 파일을 찾는다.

하나의 프로그램에서 두 키워드를 동시에 사용할 수 없다.

🪄 마치면서

Babel과 같은 ES6 코드를 변환해주는 도구 없이는 import키워드를 사용할 수 없어 require 키워드를 사용해야 하고, webpack은 node.js 환경에서 구동하므로 require을 사용해야 한다는 것도 추가로 알게 되었다. React 라이브러리를 사용할 때는 babel에서 imoprt 구문을 require 구문으로 변환해주기 때문에 import 구문 사용이 가능하다는 것을 이제야 이해할 수 있게 되었다.