클래스 컴포넌트란

hooks가 등장한 이후로 class 컴포넌트는 잘 사용하지 않는다고 한다.

class Component를 hook로 변경해야 할 때가 종종 있으므로 Class Component를 배워보자.

 

 

1. 클래스형 컴포넌트는 render( ) 메서드가 꼭 있어야 한다.

이 메서드에서 렌더링하고 싶은 JSX 를 반환한다.

>>  render( ) { return ( ) }

 

2. props 조회

props 를 조회 해야 할 때에는 this.props 를 조회한다.

const { color, name, isSpecial } = this.props;

 

3. defaultProps 설정

class Hello extends Component {

  static defaultProps = {
    name: '이름없음'
  };
  
  render() {
  	return( )
  }
 }

 

4. 함수 선언

: const로 선언하지 않고 클래스 안에 커스텀 메서드를 선언한다.

: onClick={ this.handleClick }  /  handleClick ( ) { ... }

import React, { Component } from 'react';

class Counter extends Component {
  handleIncrease() {
    console.log('increase');
  }

  handleDecrease() {
    console.log('decrease');
  }

  render() {
    return (
      <div>
        <h1>0</h1>
        <button onClick={this.handleIncrease}>+1</button>
        <button onClick={this.handleDecrease}>-1</button>
      </div>
    );
  }
}

export default Counter;

 

5. state와 setState

  1) constructor에서 this.state 설정 (=initialState)

  2) this.setState 설정

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    counter: 0
  };
  handleIncrease = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  handleDecrease = () => {
    this.setState({
      counter: this.state.counter - 1
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleIncrease}>+1</button>
        <button onClick={this.handleDecrease}>-1</button>
      </div>
    );
  }
}

export default Counter;

 

 

그밖에도 this를 bind하는 법(조회되지 않는 this를 어떤 함수와 bind, 묶어 주어 this가 어떤 값으로 설정되도록 함) 등 참고사이트에 많은 정보들이 있다. 위 내용은 기본 중에 기본만 있으므로, 꼭 아래 사이트를 참고하기 바란다.

 

**class Component에서 defaultValue 값을 설정하는 것을 발견할 수 있다. 이 때 용도를 설명하자면

-> 예를 들어 input value 값에 어떤 텍스트를 입력하고 싶은데,

state란 변경된 최신값을 의미하고, defaultValue는 변경되기 전 최초값을 의미한다.

state에 어떤 텍스트를 입력하면, 사용자가 입력하던 것 뒤에 입력되는 것이고, default 값에 입력하면 초기값에 입력되는 것이다.

또 form submit을 하면 input value 값이 초기값으로 돌아가게 되는데 이때 돌아가는 값이 default 값이다(?)

 

참고사이트

https://react.vlpt.us/basic/24-class-component.html