본문 바로가기

React

React - require / import 차이

  • require는 node의 모듈 시스템.
  • 리액트 하는 내 과정에서는 rquire = import 라고 봐도 문제 없으며 둘이 호환된다고 생각해도 된다.
  • node 로 돌리고있고, node에서는 require만 되는데,  import 를 써도 현재 에러 안나고있는 이유는 babel이 바꿔주고있기때문.
  • webpack.config.js 는 node에서 돌리기때문에 import 쓰면 안된다.
  • (1)const React = require('react'); 이렇게쓰는거랑, (2)const { hot } = require('react-hot-loader/root'); 이렇게쓰는거 차이점은?

       (1) : export default WordRelay; 와 같이 default 로 export 한 것.

       (2) : export const A = 'a'; 와 같이 변수형태로 export 한 것 ( = 구조 분해 문법)

       

 

 

*wordRelay.jsx

export default WordRelay; //es2015 모듈 문법
module.exports = WordRelay; //commonjs 문법

 

*client.jsx

import WordRelay from './WordRelay'; //es2015 모듈 문법
const WordRelay = require('./WordRelay'); //commonjs 문법