<React,TS> 클래스 컴포넌트

블로그나 공식문서에 들어가게 되면 class컴포넌트를 많이 보게된다
그럼 난 해석할 수 없기 때문에 항상 뒤로가기~~~로 도망가곤했는데 아직 사용하는 곳이 많고 언제까지 문맹으로 살 수 없다고 느껴서 class컴포넌트에 대해 간략하게 공부해보기로 했다

-함수형 컴포넌트-

function App(){
  let couter=0;
  let [couter,setCouter2]=useState(0)
  const increase=()=>{
    couter=couter+1
    setCouter2(couter2+1)
  }
}

-class 컴포넌트-

import React,{Component} from "react";

export default class AppClass extends Component {
  constructor(props){ //생성자를 통해 컴포넌트 생성할 때
    super(props)
    this.state={ //state도 같이 생성한다
      couter2:0,
      num:1,
      value:0
    }
  }
  
  increase=()=>{
    this.setState({couter2:this.state.couter2+1}) //state값을 변경하고 싶을 땐, setState를 통해 변경
  }
  
   render(){
   return(
   <div>
     <div>state:{this.state.couter2}</div>
     <button onClick={this.increase}>클릭!</button>  
   </div>
   )
  }
}

 

-타입스크립트 class-

Class User{
  name:string;
  constructor(name:string){
    this.name=name
  }
}