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

리액트에서 컴포넌트를 작성하는 방법에는 크게 2가지가 있다

클래스와 함수이다

클래스 문법은 자바스크립트와 비슷하다 여전히 클래스는 낯설고 어렵다

import React from 'react'

class App extends Componts {
render(){

return(
<div>
<h1>클래스형 컴포넌트 </h1>
</div>
    )
  }    
}

함수형은 클래스보다 정말 보기 쉽고 간결하다

import React from 'react'


const app = () => {

return(
<div>
<h1>함수형 컴포넌트 </h1>
</div>
    )
}

데이터의 상태를 관리할때 state(상태)를 사용하는데 클래스와 함수형에 그 차이가 있다

import React from 'react'

class App extends Componts {

constroctor(props){
super(props)
this.state = {
숫자 : 0
    }
}

render(){
return(
<div>
<h1>{숫자}</h1>
<button onClick={()=>{
this.setState(숫자 : 숫자 + 1)}>클릭!</button>
</div>
    )
  }    
}

constroctor를 사용하지 않고 state를 지정하는 방법

import React from 'react'

class App extends Componts {

state = {
숫자 : 0
}

render(){
const {숫자} = this.state
return(
<div>
<h1>{숫자}</h1>
<button onClick={()=>{
this.setState(prevenState => (
    숫자 : prevenState.숫자 + 1
))}>클릭!</button>
</div>
    )
  }    
}

함수형

import React from 'react'


const app = () => {

const {숫자, 숫자수정} = useState(0)

const chageHanlder = () => {

숫자수정(숫자 + 1)

}

return(
<div>
<h1 onClick=({chageHanlder}>{숫자}</h1>
</div>
    )
}

리액트 개발팀은 함수형 컴포넌트 사용을 권장합니다. 왜냐면 버전업이 되면서 함수형 컴포넌트도 상태를 관리할수 있는 훅이라는게 탄생했고
코드가 일단 간결하기 떄문입니다.