import와 require의 차이

⚽️ import (정적 로딩)

• import 구문은 ES6(ECMAScript 2015)부터 도입된 정적인 모듈 로딩 구문이다.
• import 구문은 모듈을 정적으로 로딩하며, 코드가 실행되기 전에 모듈 로딩이 이루어진다.
• 따라서 import 구문은 항상 모듈 로딩을 가장 위로 올려서 먼저 실행되고, 모듈 로딩은 브라우저 환경에서는 비동기적으로 이루어진다.
• import는 필요한 부분만 가져올 수 있기 때문에 성능 최적화에 있어서 require보다 뛰어나다. (트리 쉐이킹)

// 정적 로딩 (ES6)
import { add } from './math';

 

🏐 require (동적 로딩)

• require 구문은 Node.js에서 사용되는 CommonJS 모듈 시스템의 모듈 로딩 구문이다.
• require 구문은 동적으로 모듈을 로딩하며, 코드의 특정 부분에서 모듈이 필요한 시점에 해당 모듈이 로딩된다.
• Node.js에서는 CommonJS 모듈 시스템이 기본적으로 사용되기 때문에 `require` 구문을 주로 사용한다.

// 동적 로딩 (CommonJS)
const math = require('./math');

☂️ 중요한 차이점은 import 구문은 정적인 로딩으로 모듈 로딩이 코드 실행 전에 이루어지고, require 구문은 동적인 로딩으로 필요한 시점에 모듈 로딩이 이루어진다는 점이다.

 

⛄️ ES6 모듈은 브라우저 환경에서도 사용할 수 있지만, 일부 브라우저에서는 아직 모든 ES6 모듈 기능을 지원하지 않을 수 있으므로 웹팩 등의 번들러를 사용하여 ES6 모듈을 브라우저에서 사용 가능한 형태로 변환해야 할 수도 있다.

 

🌀 require 구문은 기본적으로 Node.js 환경에서만 동작한다.