1-1. component(컴포넌트) 만들기

프로젝트를 생성한 직후 App.js를 확인해보면

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이렇게 되어 있습니다,

코드를 전부 지우고

//App.js
import React from 'react';

const App = () => {
  return (
    <div>
      이렇게 기본적인 코드만 남겨놓고, Component를 생성합시다.
    </div>
  );
};

export default App;

MyComponent.js 파일 생성

// MyComponent.js
import React from 'react';

function MyComponent() {
    return (
        <div>
            나의 새롭고 멋진 컴포넌트
        </div>
    );
}

export default MyComponent;

App.js에 컴포넌트 삽입.

// App.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div>
        <MyComponent/>
      </div>
    );
  }
}
export default App;

보는 바와 같이, App.js에서 MyComponent를 사용하여 화면을 출력할 수 있습니다.

이처럼 컴포넌트는 모듈화를 할때 굉장히 편리하게 이용할 수 있습니다.