React - ClassComponent

클래스형 컴포넌트

최근 잘 사용하지 않는 컴포넌트 형태.
render() 메서드를 이용하여 렌더링, JSX 반환.
props를 조회해야 할 때에는 this.props를 조회.

button 클릭시 count되는 프로그램을 클래스형 컴포넌트 이용하여 구현

AppClass.jsx

import React, {Component} from "react";

export default class AppClass extends Component{    
    constructor(props){
        super(props)
        this.state = {
            counter : 0
        }
    }

    increase = () => {
        this.setState({
            counter : this.state.counter + 1
        });
    }

    render(){
        return(
            <>
                <h1>{this.state.counter}</h1>
                <button onClick={this.increase}>+1</button>
            </>
        )
    }
}

extends Component // React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 함.

constructor(props)// React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 함.

React에사 생성자 목적
this.state에 객체를 할당하여 지역 state초기화.
인스턴스에 이벤트 처리 메서드를 바인딩.
this.state를 직접 할당할 수 있는 유일한 곳. 이 외에는 this.setState()를 사용.
constructor 내부에서 setState()를 호추하면 안됨. 컴포넌트에 지역 state가 필요하면, 생성자 내에서 this.state에 초기 state값을 할당해야함.

super(props)// 이 구문이 없으면 this.props가 생성자 내에서 정의되지 않아 버그로 이어짐.

render() // React.Component의 하위 class에서 반드시 정의해야 하는 메서드.

출처 :
클래스형 컴포넌트
React.Component