Class Component 클래스형 컴포넌트

강다현·2022년 2월 3일
0

4주차

목록 보기
1/1

함수형 컴포넌트는 아래의 방법으로 사용했다면

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 = () => {} (화살표 함수)로 사용해야한다

profile
Hello🖐

0개의 댓글