require와 import 차이점

0

코드 || 키워드

목록 보기
2/5

require와 import차이점

  1. 문법구조에서의 차이
/* CommonJS  */
const name = require('./module.js');

/* ES6 */
import name from './module.js'
  1. require()는 CommonJS를 사용하는 node.js문이지만 import()는 ES6에서만 사용

  2. require()는 파일 (어휘가 아님)에 들어있는 곳에 남아 있으며 import()는 항상 맨 위로 이동

  3. require()는 프로그램의 어느 지점에서나 호출 할 수 있지만 import()는 파일의 시작 부분에서만 실행할 수 있다. (그렇지만 import 전용 비동기 문법으로 파일 중간에 모듈 불러오기를 할 수 있다.

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

  5. 일반적으로 import()는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require()보다 성능이 우수하며 메모리를 절약한다.

  6. CommonJS의 require는 동기적으로 모듈을 로드합니다. 모듈 로딩이 완료되기 전까지 코드 실행이 중지되므로, 종속성 관리가 용이하지만 성능에 악영향을 줄 수 있습니다.

  7. ES6의 import는 비동기적으로 모듈을 로드합니다. 코드 실행이 멈추지 않으므로 성능에 미치는 영향이 적습니다. 하지만 종속성 관리에 더 신경 써야 합니다.

  8. 정적과 동적 로딩
    1) require는 동적으로 모듈을 로드할 수 있습니다. 실행 중에 필요한 모듈을 조건에 따라 불러올 수 있습니다.
    2) import는 정적으로 모듈을 로드하며, 조건에 따라 동적으로 불러오는 것은 불가능합니다. 최상위 범위에서만 사용할 수 있으며, 코드 분석 및 최적화에 유리합니다.

어떤 상황에서 쓰는가?

  • CommonJS 모듈이 필요한 경우
    많은 프로젝트에서 ES6 모듈 시스템을 점점 널리 사용하는 추세이지만, 항상 import만을 사용하여 코딩할 수 있는 것은 아니다. script태그를 사용하는 브라우저 환경, NodeJS에서 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에 Babel과 같은 ES6코드를 변환해주는 도구를 사용할 수 없는 상황에선 require를 사용해야 한다.
profile
안녕하세요😄 비전공자의 웹개발자 도전기를 쓰는 중입니다! 수정/보완할 부분이 있다면 피드백 언제든 환영입니다!

2개의 댓글

comment-user-thumbnail
2023년 7월 26일

정보 감사합니다.

1개의 답글