[React] import와 require

• import : es2015(React) 모듈 문법 / React정적 import / 항상 파일 상단에서 사용
• require : Node의 모듈 문법(common.js) / 동적 import / 파일 어디에서나 사용

'modules.exports'와 'export default'는 엄밀히 말하면 차이가 있지만 호환 가능합니다.
원래 Node에서는 require만 사용하지만(import 사용 시 Error 발생),
바벨에서 import → require로 바꿔주기 때문에 우리가 React에서 import를 사용할 수 있는 것입니다.😱
(ex. 웹팩은 Node로 돌리기 때문에 import 사용 불가/ index.js 파일은 import 사용 가능)

// require
const React = require('react');
const { Component } = React;

class ReactBasic { ... }

module.exports = ReactBasic; // Node의 모듈 문법

// import로 변환 가능
import React, { Component } from 'react';

class ReactBasic { ... }

export default ReactBasic; // es2015 모듈 문법

export된 컴포넌트는 다른 파일에서 require을 사용해 불러와 사용할 수 있습니다.

// require
const React = require('react');
const ReactDom = require('react-dom');
const ReactBasic = require('./ReactBasic');

ReactDom.render(<ReactBasic />, document.querySelector('#root'));

// import로 변환 가능
import React from 'react';
import ReactDom from 'react-dom';
import ReactBasic from './ReactBasic';

{ } 형태는 구조 분해된 것인데, export 되는 자료형이 객체({ })나 배열([ ])이면 구조 분해할 수 있습다.

• 일반 export : 여러번 작성 가능
• default export : 한 번만 작성 가능

변수나 값은 export를 따로 작성할 수 있고, 한 번에 import 할 수 있습니다.

export const hello = 'hello'; // import { hello } from './ ~';
export const hello = 'bye'; // import { hello, bye } from './ ~';

export default React; // import React from 'react';
export default ReactBasic; // import ReactBasic from './ ~';

⁕ 출처: Youtube_Zerocho React 기본 강좌