App.js에서 다른 js파일의 react 컴포넌트 가져오기

디렉토리 구조가 다음과 같다고 가정한다.
root
ㄴ Hello.js
ㄴ App.js

Hello.js 파일에 Hello 컴포넌트가 선언되어 있다.

App.js 파일에 function App(){} 코드가 존재하고 App{} 내부에서 Hello 컴포넌트를 가져오려면 어떻게 코드를 써야할까?

1. 우선 Hello.js 에서 Hello 컴포넌트를 export 시킨다. (참고로, export default 키워드를 사용하면 `import Hello from ~` 형태로 사용 가능하다.)

// Hello.js
function Hello(){
  return <div>Hello</div>
}
export default Hello; 
// 또는 export Hello;

2. export 한 것을 가져와서 쓰려면 App.js에서 import Component from name 를 사용하여 Hello 컴포넌트를 가져와준다. (import 는 es6(2015) 부터 사용가능한 문법이다.)

// App.js
import Hello from './Hello' // (js 생략 가능)

function App(){
  return <Hello />
}

매우 간단하게 컴포넌트를 가져와서 화면에 뿌려줄 수 있다. 참고로 import, export 키워드는 es6에 생긴 것이므로 구형 브라우저에서 지원하지 않는 문법이다. 이와 관련해서는 `how to use import and export in older browser` 와 같이 검색해보면 된다.

# 한 파일에서 여러 개 컴포넌트를 export 하고 싶은 경우

Hello.js 파일에서 Hello 컴포넌트 말고 Bye 컴포넌트가 있는 경우에는 어떻게 할까?

// Hello.js 에서 Bye를 추가로 export ( default 키워드는 한 번만 쓸 수 있는 것에 주의)
export Bye;
export default Hello;

// App.js
import Hello, { Bye } from './Hello' // export default 되지 않은 것은 import { } 사용함에 주의