함수형 컴포넌트는 아래의 방법으로 사용했다면
function 붕어빵 {
// 만드는 방법
}
클래스형 컴포넌트는 아래의 방법으로 사용한다
class 붕어빵 {
// 만드는 방법
}
new 붕어빵()
클래스형 컴포넌트는 Component를 import하여 안에 있는 기능들을 모두 상속(extends)시켜줘야 한다.
// [[잘못된 예시]]
import { Component } from "react";
interface IState {
count: number;
} // 타입크스크립트
export default class ClassCounterPage extends Component {
state = {
count: 0,
};
onClickCounter() {
console.log(this.state.count);
// render에서 button을 클릭하는 순간,
// 여기서의 this는 동적 this이기 때문에 window로 바뀌게 되기에 window를 가르키게 된다
// onClickCounter() {} this를 사용하려면 화살표 함수로 사용하여야 하며, this는 렉시컬 this가 된다
console.log("카운터를 클릭하셨습니다.");
}
render() {
return (
<div>
<div>현재카운트: {this.state.count}</div>
<button onClick={this.onClickCounter}>카운트 올리기</button>
</div>
);
}
}
↓ 아래의 방법으로 this
를 사용해야한다
import { Component } from "react";
interface IState {
count: number;
} // 타입크스크립트
export default class ClassCounterPage extends Component {
state = {
count: 0,
};
onClickCounter = () => {
console.log(this.state.count);
this.setState((prev: IState) => ({
count: prev.count + 1,
}));
// setState는 위에서 import하여 class에 extends Component 하였기 때문에 사용할 수 있다
console.log("카운터를 클릭하셨습니다.");
};
render() {
// 함수형은 return()에서 바로 작성하여주었지만 클래스형은 아래와 같이 작성한다
return (
<div>
<div>현재카운트: {this.state.count}</div> {/* this는 class 자기 자신 */}
<button onClick={this.onClickCounter}>카운트 올리기</button>
</div>
);
}
}
this가 바뀌지 않으려면 <button onClick={this.onClickCounter.bind(this)}>
안에 .bind(this)
를 사용하거나 onClickCounter() {}
를 onClickCounter = () => {}
(화살표 함수)로 사용해야한다