TIL 22-03-17 (2)

thisisyjin·2022년 3월 17일
0

TIL 📝

목록 보기
2/113
post-thumbnail

React.js

Today I Learned ... react.js

🙋‍♂️ React.js Lecture

🙋‍ My Dev Blog




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만 구분하자.

profile
기억은 한계가 있지만, 기록은 한계가 없다.

0개의 댓글