[React] require 와 import

require란?

• require는 node의 모듈 시스템이다. (Common js문법(노드의모듈) 이라고 부른다.) module.exports = MyComponent; 이렇게 내보내면

const React = require('react');
const ReactDOM = require('react-dom');
const MyComponent = require('./MyComponent'); // MyComponent 컴포넌트 가져오기

이렇게 불러올 수 있다.😊

import란?

• import는 ECMAScript 6 (ES6) 모듈 시스템의 일부로, 모듈 관리를 Webpack 및 Babel과 같은 도구와 함께 일반적으로 사용된다. export 되는 자료형이 객체({ })나 배열([ ])이면 구조 분해할 수 있다. import { hello } 처럼 구조분해 문법 사용 (ES2015문법)
• default export : 한 번만 작성 가능처럼 구조분해 문법 사용 (ES2015문법)
  export default MyComponent; // import MyComponent;

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent'; // MyComponent 컴포넌트 가져오기

이렇게 불러올 수 있다.😊

정리

• require와 import는 프로젝트 설정에 따라 다르게 사용된다.ES6 모듈 지원을 사용하는 경우, import를 사용하는 것이 좋고, CommonJS를 기반으로 하는 코드베이스를 사용하는 경우 require 문을 사용한다.
• React 자체는 특정 모듈 시스템을 강제하지 않으므로 프로젝트의 요구에 따라 둘 중 어느 것을 사용해도 되기 때문에 둘 다 알아두자!😀