<리액트 기초> import vs require

 

* require

 - 우리는 지금까지 require로 모듈을 불러 왔다. 

 

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

 

 - require은 노드의 모듈 시스템으로 module.export로 내보낸 것을 다른 곳에서 불러와서 쓰게 한다.

 

 - 구조분해 방식으로 작성한 부분은 exports되는 대상이 객체나 배열형태이면 사용 가능하다.

 

* import

import React, { Component } from 'react';

 

 - import로 쓰게 되면 위처럼 한 줄로 깔끔하게 작성이 가능하다.

 

 - from뒤에는 파일의 경로를 작성할 수 있다.

 

 - import는 export default 로 내보낸 것을 불러올 수 있다.

 

 - 구조분해 방식으로 내보낼 경우에는 다음과 같이 보낸다.

 

export const hello = 'hello';

// import { hello }

 

 - 참고로 노드에서는 import를 쓰면 에러가 난다. 그러나 바벨이 require로 바꿔주기 때문에 사용은 가능하다. 그러나 웹팩설정부분은 노드가 돌리므로 반드시 require을 사용해야 한다. 

 

 

---

 

참고

 

 

이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)