ReactJS 다른 파일에서 Export하고 import해 오기

ReactJS파일로 작업을 하다보면 

결국 하나의 긴 파일을 분리해야 할 일이 생길텐데요.

클래스가 포함된 파일이 필요한 쪽에서는 Import를,

사용되어질  클래스를 가지고 있는 파일에서는 export를 사용하면 됩니다.

오늘은 파일을 분리해서 사용하는데 사용하는

import와 export에 대해서 정리해 보도록 하겠습니다.

1. Import

사실 import는 ReactJS의 라이브러리 클래스를 가져올 때,

이미 사용하고 있는 것인데요.

보통 첫줄에 아래와 같은 코드를 이미 사용하고 있습니다.

import React from 'react';

React라이브러리에서 React클래스를 가져다 쓴다는 의미인데요.

그럼 저희가 직접 만든 파일안에 들어있는 클래스는 어떻게 가져올 지 알아보겠습니다.

아래 이미지와 같이, 같은 디렉토리안에,

reactTest.js와 reactSuper.js파일이 동시에 

존재한다고 가정해 보겠습니다.

reactSuper.js파일에서 reactTest.js 파일안의 Hello클래스를 가져와서

사용하려고 하면 어떻게 해야할 까요?

역시나 import를 써야 하는데요.

저희가 만든 클래스에 대해서는 {}를 붙여줍니다.

그리고, from에는 파일명과 디렉토리 위치를 알려주는데요.

점(.)하나는 현재위치를 뜻하는 것이구요.

'./reactTest' 는 현재위치의 reactTest파일을 의미합니다.

예를 들면 아래와 같이 할 수 있겠습니다.

당연히도 하나의 파일에서 여러개의 var, let, const 로 선언하는 변수나

function 키워드를 이용하는 함수 혹은 class를 가져올 수도 있는데요.

예를 들면, import {Hello, Bye}같이 콤마(,)를 이용하면 됩니다.

import {Hello} from './reactTest'

아래 이미지와 같이 import해서 가져와,

render해 줄 수 있습니다

2. Export

위에서 import하는 방법을 알아보았으니,

이번에는 export하는 방법을 정리해 보겠습니다.

Export도 당연히 여러개를 한번에 보낼수도 있습니다.

Export를 하는 방법은 간단한데요.

변수를 선언하는 var, let, const 혹은

함수를 선언하는 function 혹은 클래스를 선언하는 class

앞에 export를 붙여주기만 하면 됩니다.

아래에서는 Hi클래스 앞에 export키워드를 붙여서 사용하였습니다.

추가적으로 export는 스타일에도 적용할 수 있는데요.

아래와 같은 식으로 적고 export해서 위에서 정리한 대로 import해주면 됩니다.

3. 정리

import와 export방법에 대해서 정리해 보았습니다.

생각보다 쉽고 간단한데요.

코드분리를 잘 해서 프로젝트를 관리하는데 도움이 되었으면 합니다.