import 와 export 에 대해서 간단하게 알아보자

먼저 export 를 보자 지금까지 우리는 항상

import React from "react";

const App = () => <p>hello world</p>;

export default App;

형태로만 써왔다.

그리고 나서 index.js 를 보면 상단에

import App from "./App";

이 코드가 보일것이다.

하지만 여기서 의문점이 들 수도 있다. (들어야 한다.)

내 컴포넌트는 정말 단순한데, 꼭 한개 파일에 하나씩밖에 작성을 못하나?

결과적으론 그렇지 않다.

아래 코드를 보자

// src/Template.js
import React from "react";

const Header = () => {
  return <header>header!</header>;
};

const Footer = () => {
  return <footer>footer!</footer>;
};

const Template = () => {
  return <main>main!</main>;
};

export { Header, Footer };
export default Template;

Header / Footer 함수와 Template 함수의 다른점은, export 와 export default 의 차이이다.

이 컴포넌트를

App.js 에서 랜더링 해보겠다.

// src/App.js
import React, { Component } from "react";
import Template, { Header, Footer } from "./Template";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Template />
        <Footer />
      </div>
    );
  }
}

export default App;

이게 다야!