Class 컴포넌트

연관 내용
[Class]
[Class의 this]

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

react 컴포넌트를 선언하는 방식에는 함수형 컴포넌트와 클래스 컴포넌트 두 가지 방식이 있다.
함수형 컴포넌트와 클래스형 컴포넌트는 같이 쓸 수 있다. 최근에는 클래스형을 함수형으로 바꾸는 추세이다.

1. 클래스형

• Hook 없이 state, lifeCycle 구현이 가능하다.
• 컴포넌트로 쓰기 위해서는 리액트에서 제공하는 컴포넌트를 상속받아야 한다. extends Component
• 표현 방법이 명시적이다.
• 기능이 조금 더 많다.

2. 함수형

• Hook을 이용해서 state, lifeCycle을 구현한다.
• 컴포넌트로 쓰기 위해 hook을 사용하고, jsx를 리턴해서 일반적인 함수를 컴포넌트로 사용할 수 있다.
• 클래스형에 비해 표현이 간결하다.

Class 컴포넌트 만드는 방법

1. extends Component

• 클래스명 뒤에 extends Component를 붙이면 Component 기능을 가진 클래스가 된다.
  (이걸 붙이지 않으면 컴포넌트가 아닌 클래스일 뿐이다!)

• 리액트에서 제공해주는 기능으로, Component를 붙이면 state와 render를 제공해준다.

2. state 선언하기

• state 객체 안에 선언한다. (Component에서 제공해주는 기능으로, 이름 변경 불가능)
• setState는 내장되어 있다.

3. state 사용하기

• 이 클래스(this)의 state 객체 안에 들어있기 때문에 this.state.이름으로 사용한다.
• state가 객체이기 때문에, setState도 객체이다.
• setState 안에서 prev도 사용할 수 있다.

4. render

• 함수형 컴포넌트에는 return이 있지만, Class에는 return 기능이 없어서 Component가 제공하는 render 함수를 사용해야 한다.

5. Router 사용하기

• Router를 import 받아서 사용한다. (useRouter 없음!)

전체 코드

import { Component } from "react";

interface IState {
  count: number;
}

export default class CounterPage extends Component {
  // extends Component : Component 기능으로 확장한다. 컴포넌트 기능을 가진 클래스가 된다. 이게 없으면 컴포넌트가 아니고 클래스일 뿐이다.
  // state와 render를 제공해준다.
  state = {
    // Component에서 제공해주는 기능이다. (이름을 바꿀 수 없다. 순수한 Class에서는 사용 불가)
    // setState는 내장되어있다.
    count: 0,
  };

  onClickCounter() {
    console.log("온클릭카운터 실행!");
    console.log(this.state.count);
    // this.setState({ 
    //     // count: this.state.count + 1
    // })

    // state가 객체이기 때문에, setState도 객체이다.
    this.setState((prev: IState) => ({
      count: prev.count + 1,
    }));
  }

  render() {
    // 함수형 컴포넌트에는 return이 있지만, Class에는 return 기능이 없어서 Component가 제공하는 render 함수를 사용한다.
    return (
      <div>
        {/* this: 이 클래스 자체를 의미한다. */}
        {/* 이 클래스의 state 객체 안에 들어있기 때문에 this.state.count로 사용한다. */}
        <div>현재 카운트 {this.state.count}</div>

        {/* this는 누가 실행시켰느냐에 따라서 달라진다.
        onClick이 실행되면 this는 window가 된다. */}
        <button onClick={this.onClickCounter.bind(this)}>카운트 올리기!</button>
      </div>
    );
  }
}