리액트 React : Module, import 및 export

Module 이란?

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

 

import / export?

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

 

예를 들어 , data.js라는 파일이 있는데 거기 있던 변수를 App.js 에서 가져와서 쓰고 싶으면 

(data.js 파일)

let a = 10;
export default a;

 

export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있습니다. 

 

(App.js 파일)

import a from './data.js';
console.log(a)

 

export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로' 하면 됩니다.

 

(유의점)

- 변수, 함수, 자료형 전부 export 가능합니다.

- 파일마다 export default 라는 키워드는 하나만 사용가능합니다.

- 파일경로는 ./ 부터 시작해야합니다. 

 

export { } / import { } 문법

 

여러개의 변수들을 내보내고싶으면 export default 말고 이런 문법을 씁니다.

 

(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }

 

그럼 원하는 변수, 함수 등을 여러개 내보낼 수 있습니다.

 

(App.js 파일)

import { name1, name2 } from './data.js';

 

export {} 이걸로 내보냈으면 가져다가 쓸 때 import {} 문법을 씁니다.

 

(유의점)

- export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능합니다. export 했던 변수명 그대로 적어야 합니다.

 

출처 : 코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"