5. import, require 정리

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 fromt 'CompoB'

2) 형태2

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

import { hello } from 'react';

export하는 값이 const 타입의 변수 명일 때 import 문의 형식이며,

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

3. 정리

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

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

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

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

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

from http://jeonghoonmoon.tistory.com/62 by ccl(A) rewrite - 2021-11-13 02:00:49