모듈 호출 방식 (import, require)

모듈 호출 방식 (import, require)

리액트 프로젝트에선 ES6 방식인 import 방식을 더 사용하지만, 필요에 따라 import를 쓰기도, CommonJS 방식인 require를 쓰기도 한다.

 

 

1. import 방식 / ES6 모듈

ES6 모듈: import { createBrowserRouter } from "react-router-dom";

 

2. require 방식 / CommonJS

const { createBrowserRouter } = require("react-router-dom");

3. 차이점

방식	ES6 / import	CommonJs / require
임포트 시점	정적 임포트 / 컴파일 시점	동적 임포트 / 런타임 시점
데이터 교환 방식	import - export를 통해 모듈 간 데이터 교환	module.exports와 require를 통해 교환
트리셰이킹	트리셰이킹 지원	트리셰이킹 미지
표준화 및 사용환경	최신 자바스크립트 표준, 브라우저 및 대부분 최신 빌드 도구에서 사용	Node.js 환경에서 주로 사용

 

 

* 트리 셰이킹(Tree shaking) - 사용하지 않는 코드를 제거해 최종 번들 크기를 줄이는 최적화 기법

* 컴파일 시점 - 소스 코드가 실행 가능한 코드로 변환되는 시점 (컴파일러에 의해 변환, 오류는 프로그램 실행 전 수정해야하며 여러가지 오류를 잡아낼 수 있다.)

* 런타임 시점 - 컴파일된 프로그램이 실행되는 시점. 실제 프로그램 동작 시점으로 여로 오류가 발생가능(실행 중 오류 바로 처리애햐 함)

 

 

* 참고

Module : CommonJs 와 Es6 차이