[React] 게임으로 배우는 리액트 - import와 require 비교

---

import는 리액트에 딱히 필요는 없지만 지금 많은 소스코드들이 require보다 import로 많이 작성되어있습니다.

우선 import와 require 모두 외부 파일이나 라이브러리를 불러올 때 사용하는 모듈 키워드입니다.

​

require부터 알아보자면 require는 노드의 모듈 시스템입니다.

​

 

const React = require('react');

const WordRelay = () => {
    return (
        <>

        </>
    )
}

module.exports = WordRelay;

이런 형태의 jsx파일이 있다고 했을때 WordRelay라는 이름으로 모듈화를 해놓았기 떄문에 다른 파일에서 이 파일을 불러 올때

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

이와 같은 방식으로 불러오게 됩니다.

​

const React = require('react');

와 같은 react는 npm i로 설치하였는데 기존에 만들어져 있는 스크립트를 가져오는 것입니다.

​

​

위의 코드들을 import로 바꿀수가 있습니다.

import React from 'react';
import WordRelay for './WordRelay';

이처럼 import와 require는 호환이 됩니다.

​

​

module.exports = WordRelay;

이는 노드 모듈 문법이고

​

export default WordBaseball;

이는 ES2015 모듈 문법입니다.

​

노드의 모듕 문법은 CommonJS라고 부릅니다.

​

위의 두가지는 비슷한 의미입니다.

deep하게 들어가면 다른 의미이지만 일단 리액트에서는 같다고 생각하셔도 무방합니다.

​

​

import React, { Component } from 'react';

class NumberBaseball extends Component {

}

export const hello = 'hello';
// exports.hello = 'hello';

export default NumberBaseball;
// module.exports = NumberBaseball;

이처럼 { }가 있는 구조 분해 문법도 있습니다.

default로 export가 되어있는 경우 코드의 export default NumberBaseball;은 import NumberBaseball로 가져올수가 있고 export const hello = 'hello';와 같이 default로 export하지 않은 것들은 import { hello } 와같은 형태로 가지고 옵니다.

​

한 파일에서 두가지 모두를 같이 사용할수 있으며 default는 딱 한번만 사용할수 있고 변수형은 이름만 겹치지 않게해서 여러개를 export할수 있습니다.

​

​

​

근데 노드에서는 require만 지원을 하기 때문에 원래는 import를 사용하면 에러가 발생합니다.

근데 어떻게 코드들에서는 import를 쓰고 있는 코드가 있을까요??

babel이 import도 require로 바꿔주기 때문입니다.

​

사실 모두 require로 해도 상관없지만 import로 작성되어 있는 코드도 많기 대문에 알아두시는것이 좋습니다.