> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/reactjs/cdn/component/class-component.md).

# 클래스 컴포넌트

## Class Component

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

```javascript
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 구조

### 상속 <mark style="color:red;">\*</mark>

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

```javascript
class MainComponent extends React.Component {

}
```

### render 함수 <mark style="color:red;">\*</mark>

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

```javascript
render(){
    return (JSX);
}
```

## 렌더링

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

```jsx
app.render(
    <MainComponent/>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/YzvzpJY>" %}