5. import, require 정리

1. require

class ComponentA {}

module.exports = ComponentA;

 

const ComponentA = require('./ComponentA.jsx);

js 파일에서 해당 컴포넌트를 불러오는 방법 중하나로 require문이 있는데 require문으로 외부 파일로 선언된 컴포넌트를 불러오려면 module.exports = ComponentA; 형태이다. 

 

2. import

1) 형태1

//이 클래스가 선언된 파일이름은 CompoB라고 가정.
class ComponentB {}
export default ComponentB;

 

import ComponentB from 'CompoB';

 

 

3. 여러 모듈을 export하는 방법

1) 형태1

//파일 이름이 react.js 이며 파일에 아래와 같이 export됨
export const hello = {id : '123'};

 

import { hello } from 'react';
const { hello } = 'react';

export하는 값이 const 타입의 변수 명일 때 위와 같이 두 가지 형태로 가져올 수 있다. 

const형태의 export는 한 js 파일에서 여러개가 가능하다.

 

2) 형태2

//이 파일의 이름을 home.js라고 가정
exports.home = function() {console.log("HOEM!")}
exports.page = function() {console.log("PAGE!")}

 

var a = require('./home'.js);

a.home();
a.page();

 

 

3. 정리

노드에서는 import문은 쓰면 안되고 require문만 사용가능하나, 바벨이 있는 경우 바벨이 import문을 require문으로 변경해준다.

 

● 노드에서는 require만 쓰는것을 권장

● 리액트에서는 import방식을 사용한다. 리액트에서는 import, require 모두 호환 됨

● import문을 노드에서 돌리면 바벨이 알아서 require로 바꿔준다.

● 리액트, 노드에서 require만 사용하면 되는데 import 사용한 구문도 많아서 둘다 알아야함