require, import

require는 노드의 모듈 시스템이다.

const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root')

노드의 module.exports는 export default. 호환된다.  깊이 따지면 다르다.

 

import는 ES2015 문법이다.

import React 'react';
import ReactDom 'react-dom';
import { hot } 'react-hot-loader/root';

export default ....;

 

exports 되는 게 객체나 배열이면 구조 분해할 수 있습니다.

 

import React, {Component} from 'react';

class NumberBaseBall extends Component{



}

//default로안한경우

export const hello = 'hello' // import {hello};
export default NumberBaseBall; //import NumberBaseBall;

 

 

 

노드에서는 common.js 모듈을 지원해 import구문을 쓰면 error가 발생합니다. 그렇지만 바벨이 import를  require로 변경해주기 때문에 에러가 발생하지 않습니다.

 

jsx파일에서 사용되는 import는 webpack을 사용하여 require로 변경해줄 수 있지만 webpack자체는 node에서 실행시키기 때문에 import를 사용할 시 에러가 발생합니다.