[React] 파일import , export

코드를 작성하다 보면 코드가 길어져서 가독성이 떨어지는 경우가 발생합니다.

이럴 경우 다른 파일에 생성해둔 코드를 import 하여 그 파일의 변수,함수 등등을 사용합니다.

재직중인 회사에서 사용하는 jsp에서는 <%@ include file ="/jsp/Header.jsp" %>이런식으로 태그를 사용했고 ,
자바스크립트도 마찬가지로 태그(<script src="주소"></script>)를 이용하여 import 했습니다.

React에서 사용하는 import,export와 개념자체는 비슷하지만 , 하나 다른 점은
현재 페이지 기준으로 , 불러올 페이지에서 export를 해줘야 한다는 점입니다.

data1이라는 변수를 App.js에서 사용하는 방법입니다.
ex) data.js를 App.js 로 import하기 
export는 하단에 작성

let data1 = 10;

export default data1;

App.js
상단 부분에 작성

import data1 from './data.js';//data.js에서 import 해온 데이터

이제 data1을 App.js에서 사용할 수 있습니다.

위에는 export 할 데이터가 하나일 경우고 , 두개 이상은 문법이 조금 다릅니다.
하나일 경우 default를 사용하고 , 두개 이상일 경우 default를 제외하고 중괄호 안에 변수,함수등을 작성합니다.

let data1 = 10;

let data2 = 20;

export { data1,data2 };

export가 다르니 import도 다르겠죠 ?

import { data1,data2 } from './data.js';//data.js에서 import 해온 데이터

import도 중괄호 내에 작성하면 됩니다.

컴포넌트나 코드가 길어질 경우에 import,export를 사용하여 코드의 가독성을 높이면

유지보수측면에서 조금 더 효율적인 프로그래밍이 될 수 있을 것입니다.

틀린내용이나 보충 및 지적사항 달게 듣겠습니다 ! 

감사합니다