React Component 사용하기

1. component란

특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말하며 component를 파일 단위로 작성 후 필요한 위치에 import 후 사용할 수 있다.

 

2. component 만들기

1) component를 만들기 위해 component들을 관리할 component폴더를 src 폴더 안에 먼저 만들어주자.

2) component폴더 안에 Component1.js 파일을 생성해 주고

3) 파일 안에 다음과 같이 코드를 작성해 준다.

import React, {Component} from 'react';

class Component1 extends Component{
    render(){
        return(
            <h2>[component1 입니다]</h2>
        )
    }
}

export default Component1;

 

 

4) 코드 작성이 완료되었으면 App.js에 다음과 같이 코드를 작성해 보자.

import './App.css';
import Component1 from './component/Component1';

function App() {
  return (
    <div>
      <h1>안녕하세요.</h1>
      <p>메인페이지입니다.</p>
      <Component1></Component1>
    </div>
  );
}

export default App;

 

5) 배경색이 검은색이기 때문에 css파일에 h2 {color: white}까지 추가해 주면

 

다음과 같이 component를 제대로 불러와 적용된 메인페이지를 볼 수 있다.