import, require, export // 20210422

김지민·2021년 4월 22일
0

TIL

목록 보기
28/28

1. require란?

  • node의 모듈 시스템에서 사용되는 키워드. module.exports로 모듈화된 소스코드를 다른 파일에서 불러옴.
//ex
const NumberBaseBall = require('./NumberBaseBall');
  • 남이 만든 스크립트도 require로 불러올 수 있음.(ex: react)

2. import?

  • import도 require처럼 소스코드를 가져올 수 있는데 문법은 아래
import NumberBaseBall from './NumberBaseBall';
  • 대신 import로 불러오게 되면 불러올 소스코드 하단에 module.exports 가 아니고
export default NumberBaseBall;

형태로 해야함.

3. 구조분해?

  • exports되는게 객체나 배열이면 구조분해 문법으로도 가능.
  • export할때 export default로 한 것은(예를 들면 export default NumberBaseBall;) 가져올 때 import NumberBaseBall;로 가져와야 함.
  • default로 exports하지 않은 것들(예 : export const hello = 'hello';)가져올 때 import { hello } 이런 식으로 중괄호(구조분해문법)로 가져와야 함.
  • 그리고 export default는 한번만 쓸 수 있고 export const는 변수명만 안겹치면 여러번 쓸 수 있음. 또 import할때도 { aaa, bbb } 이런 식으로 여러 개도 동시에 가능.

4. import React, { Component } from 'react'?

  • 문서 상단에서 React와 Component를 호출할 때 쓰는 문장인데, 위의 내용을 참고하면 React는 export default로 되어있고 component는 export const 형태로 되어있다는 것을 알 수 있다.

5. export default? module.exports?

  • 엄밀히 말하면 다름. 하지만 React를 사용할 때에는 호환이 가능하다고 알아둬도 문제없음.
    0
  • 노드 모듈 시스템에서
module.exports = { hello : 'a' };
exports.hello = 'a';

는 같음.

6. require? import? exports?

  • node에서 require(와 module.exports)를 쓰고 react에서는 import와 export를 쓴다. 하지만 바벨이 import를 require로 바꿔주기 때문에 import도 사용 가능.
  • 즉 node에서 구동되는 webpack에서는 import를 사용하면 에러가 남. 하지만 webpack에서 구동되는 babel로 인해 react에서는 import를 사용할 수 있음.
  • 우선순위
    node > webpack > babel > react
profile
wishing is not enough, we must do.

0개의 댓글