Component 사용하기

🏹 Component (컴포넌트)

여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을
수행할 수 있도록 구성한 작은 단위로, component 파일 단위로
작성 후 필요한 위치에서 import해 사용할 수 있다.

🚩 소스코드 ( R003_ImportComponent.js )

src 폴더에 R003_ImportComponent.js 파일 생성 후 다음과 같이 입력한다.

import React, { Component } from 'react';

// 첫 번째 줄에서 import한 Component를 상속 받아
// R003_ImportComponent 클래스에서 사용
class R003_ImportComponent extends Component {
  render () {
    // return된 html 코드를 render() 함수를 사용해 화면에 표시
    return (
      <h2>[ THIS IS IMPORTED COMPONENT ]</h2>
    );
  }
}
export default R003_ImportComponent;

🚩 소스코드 ( App.js )

App.js 파일을 다음와 같이 수정한다.

import React from 'react';
import './App.css';
import ImportComponent from './R003_ImportComponent'
// App.js 파일과 같은 경로에 위치한 R003_ImportComponent.js 파일을 import해 사용

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ImportComponent></ImportComponent>
      {/* R003_ImportComponent.js에서 작성한 component 사용
          이때 render() 함수에서 읽어들인 코드가 이식 */}
    </div>
  );
}

export default App;

🔍 실행 결과