Class Component vs Functional Component

클래스형 컴포넌트와 함수형 컴포넌트!!

클래스형을 이전까지 많이사용했지만 리액트에서 훅을 지원해주면서부터
함수형을 더 쓰게되었음

그런데 이미 클래스형으로 작성되어있는 곳들이 많고 그걸 바꾸는 작업들을 많이 하고있다보니, 현재상황에서는 둘다 알아야하는 ㅜㅜ

특히 클래스형 컴포넌트에서 함수형 컴포넌트로 변경을 할 줄 알아야할 것같다.

import { Component } from "react";

interface IState {
  count: number;
}
// extends Component 는 CounterPage 를 카운터로 확장시킨다는것!
export default class CounterPage extends Component {
  state = {
    count: 99,
  };

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

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

  // 화살표함수를 사용해야 디스가 가리키는것이 지금페이지 전체를 말하는것이 된다.
  // this 가 가리키는 것이 윈도우로 인식됨 (윈도우에서 버튼을 실행시키니까!)

  //   onClickCounter() {
  //     // console.log("카운터클릭");
  //     console.log(this.state.count);
  //     // this.setState((prev: IState) => ({ count: prev.count + 1 }));
  //   }

  render() {
    return (
      <>
        <div>현재카운트 : {this.state.count}</div>
        <button onClick={this.onClickCounter.bind(this)}>
          카운트 올리기!!
        </button>
      </>
    );
  }
}