section2. 3-1. import와 require 비교

require

require : node의 모듈 시스템

내보내기 module.exports 이름; (= export default) 엄밀히 따지면 다른데 react 하는 데에는 호환된다고함.

가져오기 const 변수명 require('이름');

 

노드 모듈 시스템에서 

module.exports = { hello: 'a' };

exports.hello = 'a'; 는 같다.

 

import

ES2015문법으로 Node의 모듈과 다르다.

내보내기 export default 이름; (한번만 가능)   import { hello };

               export 이름; (여러번 가능)               import Numberbaseball;

가져오기 import 이름 from '이름';

 

사실 import쓰면 에러가 나는데 babel이 import들을 모두 require로 변경해준다고함.

Node에서는 require쓰고, react에서는 import와 exports 쓴다.

 

webpack

웹팩은 노드가 돌려주는 것이기 때문에 require를 써야한다!!

client부분(jsx)는 babel이 import를 require로 변경해주기 때문에 import를 사용해도 된다.

 

 

공통점은 exports 되는게 객체나 배열이면 구조분해 가능!

ex) import {useState, useRef} from 'react';