리액트 기초 : Component

 

1. 컴포넌트

계속적인 div로 복잡한 html을 간결하게 정리정돈하는 도구

 

2. 컴포넌트 선언 방법

함수형과 클래스형이 있지만 여기서는 클래스형을 이용한다.

1) Content.js

import React from "react";
import { Component } from "react";

class Content extends Component{
    render(){
        return(
            <article>
                <h2>HTML</h2>
                HTML is HyperText Markup Language
            </article>
        );
    }
}

export default Content;

클래스에 React의 Component 클래스를 상속한다.

Component 클래스가 가지는 render() 메서드를 구현하는데,

이 곳에 표현하고자 하는 html 요소를 리턴한다.

다은 컴포넌트에서도 해당 컴포넌트를 사용하기 위해 export 시켜준다.

 

파일 이름은 첫문자는 대문자로 한다.

 

2. 컴포넌트 이용 방법

import './App.css';
import { Component } from 'react';
import Subject from './Subject';
import Toc from './Toc';
import Content from './Content';

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject/>
        <Toc/>
        <Content/>
      </div>
    );
  }
}

export default App;

이용하고자 하는 컴포넌트를 import 하고

import 한 네이밍을 <네이밍></네이밍> 혹은 <네이밍/> 과 같이 사용한다.

 

실행 결과

<--- Subject 컴포넌트 <--- Toc 컴포넌트 <--- Content 컴포넌트

(Subject 컴포넌트와 Toc 컴포넌트는 생략하였다)