프레임워크/리액트 React
모듈 호출 방식 (import, require)
raim-2
2024. 7. 9. 16:53
반응형
모듈 호출 방식 (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) - 사용하지 않는 코드를 제거해 최종 번들 크기를 줄이는 최적화 기법
* 컴파일 시점 - 소스 코드가 실행 가능한 코드로 변환되는 시점 (컴파일러에 의해 변환, 오류는 프로그램 실행 전 수정해야하며 여러가지 오류를 잡아낼 수 있다.)
* 런타임 시점 - 컴파일된 프로그램이 실행되는 시점. 실제 프로그램 동작 시점으로 여로 오류가 발생가능(실행 중 오류 바로 처리애햐 함)
* 참고