Module?

React를 개발하다보면 파일이 커지면서 여러 개의 파일로 나뉘게 되는데, 이 때 분리된 파일들의 이름을 모듈(module)이라고 한다. 모듈내에는 함수, 변수 등 있다.
또, 다른 모듈안에 있는값을 불러오거나, 모듈 내에 있는 값들을 외부로 내보낼 수 있다.
이때 import(불러오기), export(내보내기) 라고 한다.

import / export?

변수나 함수, 자료형을 다른 파일로 저장해둔 뒤에 불러오는 방법이다.
1. data.js(원하는 데이터파일)을 export하고
2. App.js(불러와서 적용할파일)에 import를 하면 된다.

1. export

1) data.js에서 App.js로 데이터를 내보낼 때

// (data.js)
// var 변수명작명 = '데이터';
var dataName = 'react';
export default dataName;

① 변수명, 함수명, 자료형 전부 내보낼 수 있다.
② 파일마다 export default 라는 키워드는 하나만 사용 할 수 있다.

2) 여러개의 변수를 내보내고 싶을 때

// (data.js)
var dataName1 = 'react1';
const fruits = ['사과', '귤', '배'];
function hello(){
	console.log('hello');
}

export { dataName1, fruits, hello };

2. import

1) data.js에서 app.js로 데이터를 가져와서 쓸 때

// (App.js)
// import 변수명작명 from '가져올데이터파일경로';
import Data from './data.js';

① './'은 현재경로를 뜻한다.
② 변수명작명 부분은 자유롭게 작명할 수 있다.

2) 여러개의 변수를 가져다 쓰고 싶을 때

// (App.js)
import { dataName1, fruits, hello } from './data.js';

이 경우에는 변수명작명이 불가능하고 export 했던 변수명을 그대로 사용해야 한다.