클래스 컴포넌트

Class Component

Class Component는 JS 클래스 문법으로 정의된 컴포넌트를 말한다.

class MainComponent extends React.Component {
    render(){
        return (
            <>
                <h1>This is class component</h1>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    //class 이름을 태그로 사용
    <MainComponent/>
);

Class 구조

상속 *

class component를 생성하기 위해서는 React의 Component 클래스를 상속받아야 한다.

class MainComponent extends React.Component {

}

render 함수 *

render 함수는 React Component의 화면을 구현하기 위해서 반드시 필요하다. 함수에는 JSX가 반환되도록 코드가 작성되어 있어야 하며, render 함수에서 컴포넌트의 값을 변경하는 것은 금지되어 있다.

render(){
    return (JSX);
}

렌더링

생성한 클래스 컴포넌트를 렌더링 할 때는 다음과 같이 클래스명 태그로 한다.

app.render(
    <MainComponent/>
);