Import와 require 비교

require은 node의 모듈 시스템이다. 

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

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

const Hot = hot(NumberBaseball);

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

즉 파일에서 module.exports에 numberbaseball class를 넣어주면 그거를 다른 파일에서 require해서 불러올 수가 있다.

class NumberBaseball { } 부분이 module.exports 부분에 담겨서 위에 numberbaseball로 require이 된다.

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

class NumberBaseball {

}

module.exports = NumberBaseball;

 

require을 import from으로 바꾸면 hot 부분은 구조분해 문법인데 

import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from'react-hot-loader/root';

import NumberBaseball from './NumberBaseball';

const Hot = hot(NumberBaseball);

ReactDOM.render(<NumberBaseball />, document.querySelector('#root'));

 

아래를 보면 default를 한 애들은 import로 가져오고 안 한 애들은 구조분해로 가져온다.

default는 한 번만 쓸 수 있고 그냥 export는 많이 쓸 수 있다.( 둘 다 호환이 된다.)

import React, { Component } from 'react';


class NumberBaseball extends Component {

}

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

export default NumberBaseball; // import NumberBaseball;

그리고 위 코드는 es2015 모듈 문법이고

 

아래 코드는 node의 문법이다.(common js) 즉 node에서는 require을 쓰고 react에서는 import와 export를 쓴다고 생각하자.

// const React = require('react');
// exports.hello = 'hello';
// module.exports = NumberBaseball

웹팩을 돌릴 때 노드로 웹팩을 돌리는데 노드에서는 node 문법만 지원을 한다. import 쓰면 에러가 날 것을 예상할 수 있는데 아니다. babel이 import도 require로 바꿔주기 때문이다.(webpack.config.js를 보면 babel 부분 확인할 수 있다.)

// webpack.config.js

module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['> 1% in KR'], // browserslist
                        },
                        debug: true,
                    }],
                    '@babel/preset-react',
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel',
                ],
            },
        }],
    },

그래서 webpack.config.js 부분에서 const path 부분은 import로 하면 에러가 나게된다.(노드가 돌려주기 때문에)

const path = require('path'); // import path(x)
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<출처 조현영: 웹 게임을 만들며 배우는 React>

https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의