클래스형 컴포넌트

클래스형 컴포넌트를 실제 컴포넌트 처럼 쓰고 싶다면,
리액트에서 제공하는 컴포넌트 기능을 가져와야함.

import {Component} from "react"

이렇게 컴포넌트를 불러와야 클래스를 컴포넌트 처럼 쓸 수 있다.

컴포넌트 기능 상속받음

리액트로부터 컴포넌트라는 기능을 상속 받았기 때문에

export default class ClassComponentLifecycePage extends Component

뒤에 extends Component라고 붙여준것임.

클래스형 컴포넌트에선 리턴문을 그냥 써주면 안된다

클래스형 컴포넌트에선 바로 리턴을 못해주기 때문에

render() {
  return (
    
  )
}

이렇게 render함수안에 리턴문을 써줘야 먹힘

클래스형 컴포넌트에서 state 쓰기

위 사진에서 setState라는 기능을 어디서 만들어주지도 않았는데 쓴걸 볼 수 있는데,
클래스 컴포넌트에서 상태변경함수를 만들지 않아도 쓸 수 있다.

그 이유는 리액트에서 Component라는 기능을 import 해왔기 때문에 가능하다.

onClickCount = () => {
    this.setState((prev: IState) => ({
      count: prev.count + 1,
    }));
  };

그래서 setState를 만들어주지 않아도 이렇게 쓸 수 있다.

클래스 컴포넌트에서 state 쓰는 방식

state = {
  count: 0
}

state를 이렇게 써주고 바인딩 할땐

this.state.count

this라는 키워드를 앞에 붙여줘야한다.