React의 클래스 컴포넌트

컴포넌트는 React의 핵심이며 UI를 더 작고 재사용 가능한 조각으로 나눌 수 있습니다. 집중된 구성 요소를 유지하면 문제를 그 어느 때보다 쉽게 ​​분리할 수 있습니다. React 16.8에서 Hooks가 도입되기 전에는 컴포넌트에서 상태를 사용하는 유일한 방법은 클래스 컴포넌트로 만드는 것이었습니다.
클래스 구성 요소를 생성하려면 먼저 React를 파일로 가져와야 합니다. import React from 'react';  . 거기에서 클래스의 이름을 지정하고 React Component의 기능에 대한 액세스 권한을 부여해야 합니다.
class OurCounter extends React.Component
컴포넌트가 DOM에 추가될 때 무엇을 반환해야 하는지 React에 알려주기 위해 클래스 컴포넌트 내부에 render() 함수를 정의합니다.
반응에서 클래스 구성 요소의 가장 기본적인 설정은 다음과 같습니다.

import OurCounter extends React.Component {
render() {
return <h1> Hello World! </h1>
}
}

하지만! 클래스 구성 요소를 사용하면 상태를 사용할 수 있으므로 구성 요소 내에서 정보를 유지 관리하고 업데이트할 수 있습니다.
초기 상태를 제공하기 위해 클래스 내에 생성자 함수를 작성해야 합니다. 간단한 카운터를 생성하려면 다음과 같은 생성자를 작성합니다.

constructor {
super(); // super() allows us to use 'this' inside the constructor -- we're using inheritance with the 'extends' keyword
this.state = {
count: 0
}
}

this 값은 우리 클래스의 인스턴스를 참조합니다. 그래서 우리는 React에게 "이 클래스의 인스턴스는 { count: 0 } 값을 가진 state라는 속성을 가져야 합니다."라고 말하고 있습니다. 초기 상태를 사용하여 페이지에 렌더링{this.state.count}할 수 있으며 0으로 표시되거나 초기 값을 생성자 내부로 설정했을 수 있는 모든 것으로 표시됩니다.
엄청난! 클래스 구성 요소에 상태가 있지만 어떻게 업데이트합니까?
생성자 아래에서(하지만 외부render()  - 최종 프로젝트 평가에서 범한 매우 어리석은 실수), 카운터 값을 증가시키는 함수를 작성해야 합니다.

counterPlus = () => {
this.setState({
count: this.state.count + 1
})
}

화살표 함수로 counterPlus 를 쓰면 this 값이 OurCounter 의 인스턴스로 바인딩됩니다.

이제 우리는 함수를 사용하고 브라우저에서 React의 마법을 보고 싶습니다! 우리 클래스의 렌더 함수 안에, 우리는 클릭할 때마다 함수를 호출하고 해당 상태의 카운트 값을 증가시키는 이벤트 리스너가 있는 버튼을 표시할 것입니다.

render() {
return <button onClick={this.counterPlus}> {this.state.count} </button>
}

우리가 렌더 함수 내부에 작성한 것은 우리에게 버튼을 제공합니다. 그 버튼을 클릭하면 counterPlus 기능이 호출됩니다. 해당 함수가 호출되면 OurCounter 상태의 이 인스턴스를 업데이트합니다. 모두 합치면 클래스 구성 요소는 다음과 같아야 합니다.

import React from 'react';
class OurCounter extends React.Component {
constructor() {
super();
this.state = {
count: 0
}
}
counterPlus = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return <button onClick={this.counterPlus}> {this.state.count} </button>
}
}
export default OurCounter; //so we can use the increment button anywhere in our React application, as long as we import it