지금까지 Functional Component(함수형 컴포넌트)만 사용해왔는데
Class Component(클래스형 컴포넌트)라는 것도 존재하는걸 알게되었다.
둘의 차이점이 무엇인지 알아보자
Class Component
class란 객체이자 물건을 만드는 설명서라고 표현할수있다
class안에는 함수와 변수를 넣을수있고, 이 변수와 함수를 조합하여 하나의 물건을 만드는 방법을 적어둘수있다.
그리하여 만들어진 물건은 객체 또는 인스턴스라 부른다
import { component } from 'react'
//클래스에서는 공통 기능을 extends를 통해 상속할수있다
export default class ClassPage extends Component {
// class에서의 변수의 선언 방식
state = {
count : 0
}
// class에서의 함수 사용방식
onClickEvent = () =>
console.log(this.state.count)
}
// 화면 그리는 부분
render(){
return(
<div>
// this는 class 자기자신을 뜻합니다
<div>현재 카운트: { this.state.count }</div>
<button onClick = { this.onClickEvent }>버튼</button>
</div>
)
}
}