React - import, require, export 관계

* require 와 import 차이

- require 는 node 의 모듈 시스템이다.

- import, export 는 React 거야

- [ module.exports ]  랑 호환되는게 [ exports default ] 임

- require 랑 import 랑 호환되는경우도 있다.
- require = import(엄밀히 따지면 다른거지만 지금은 호환된다고 생각해도 된다.)
- moule.exports = exports default (엄밀히 따지면 다른거지만 지금은 호환된다고 생각해도 된다.)
- module.exports = { hello: 'a'};  >>  es2015 문법
- exports hello = 'a'; >> commonJs 문법
- node 에서는 require 만 써야함. 그런데 import 써있는부분도 잘 돌아가는 이유는 babel 이 바꿔주기 때문.
- webpack.config.js 는 node 가 돌리기때문에 import 쓰면 안돼. 꼭 const 로 써야한다.
- client.jsx 는 웹팩의 바벨이 나중에 바꿔주기때문에 import 써도되긴하다.

1) require

-- 컴포넌트.jsx

module.exports = WordRelay;

// 또는

exports default WordRlay;

-- client.jsx 

 const WordRelay = require('./WordRelay_hooks');

 

2) import

-- 컴포넌트.jsx

...
exports default WordRlay;

-- client.jsx 

import WordRelay from './WordRelay';

 

2-1) import 할 때, 변수명으로 쓰인 것과 {} 중괄호와 같이 쓰인 것 차이

1) 변수명으로 쓰인 것

- 컴포넌트.jsx

...
exports default WordRlay;

- client.jsx

import WordRelay from './WordRelay';

 

2) 중괄호와 같이 쓰인 것

- 컴포넌트.jsx

 ...
 export const hello = 'hello';

- client.jsx

import { Hello } from 'react';