React.js

Today I Learned ... react.js

🙋‍♂️ React.js Lecture

🙋‍ My Dev Blog

• 지난번 학습
  • 끝말잇기 예제 (WordRelay.jsx)
  • HMR (Hot Module Reloading) 설정
    

import와 require

require

node의 모듈 시스템.
exports 되는것이 객체나 모듈이면 구조분해로 가져올 수 있음.

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

// export시
module.exports = WordRelay;

import

ES6 문법.
import '변수명' from '파일명' 과 같이 작성함.
마찬가지로 객체나 모듈은 구조분해로 가져올 수 있음.

import { Component } from 'react'

// 합쳐줄수도 있음
import React, { Component } from 'react';

// export시
export default WordRelay;

📌 export default vs. export

export default BullsAndCows;     // import BullsAndCows 
export const hello = 'hello World!';  // import { hello }

export const hello = 'hello World!'는 node문법(common JS)로 작성하면
export.hello = 'hello World' 가 된다.

Common JS vs. ES6

// 🔻 Common JS 문법
const React = require('react');
exports.hello = 'hello World!';
module.exports = WordRelay;


// 🔻 ES6 문법
import React from 'react';
export const hello = 'hello World';
export default WordRelay;

🙋‍♂️ 호환이 되는건지?

기본적으로 노드로 웹팩을 돌리기 때문에 CommonJS만 지원한다.
그러나, Babel이 ES6 문법도 CommonJS로 바꿔주기 때문에
jsx(리액트)에서는 import 쓰면 되고,
node에서는 require 쓰면 알아서 컴파일된다!
❗ export default와 그냥 export만 구분하자.