[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 30회차 미션 - 30강 class형 컴포넌트

class형 컴포넌트

classs는 컴포넌트를 선언하는 또다른 방식이다. 요즘은 잘 사용하지 않는다. 함수형 컴포넌트랑 훅으로는 할 수 없는 작업이 두개정도 있긴 하다. class컴포넌트는 꼭 필요할때만 쓰는게 맞다. 옛날에 코드를 유지보수할 때 사용할 수도 있기때문에 알아보도록 하자.

//class형 컴포넌트로 사용시
impoart React, { Compoent } from 'reat'
class Hello extends Component {
  static defaultProps = { //class에서는 defaultProps를 이렇게 설정해줄 수도 있음.
    name: '이름없음',
  }
  render(){
    return (
      const { color, isSpecial, name } = this.props;
      <div style=>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    )
  }
}

//기존 함수형 컴포넌트 사용시
function Hello({ color, name, isSpecial }){
  return (
    <div style=>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  )
}
Hello.defaultProps = {
  name: '이름없음'
};

예전에는 함수형 컴포넌트 안에서 상태관리를 할 수 없었다. 하지만 요즘에는 Hook(useEffect, useState, useReducer 등)으로 관리해주기때문에 class형 컴포넌트는 살짝 뒷전이 되었다. 여기서 defaultProps를 설정하는 방법은 기존 함수형 컴포넌트 하단에 써준것 처럼 Hello.defaultProps로 써줄 수도 있지만, 위에처럼 class내부에 static defaultProps로 써줄수도 있다.

class형 컴포넌트의 state와 setState

한번 기존에 만들었던 Counter컴포넌트를 class형으로 바꿔보도록 하자.

Counter.js

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;

이렇게 해줄 수 있는데 여기에 한가지 문제가 있다. 버튼에서 onClick으로 함수를 매서드를 부를때 this를 써줬었는데 매서드 안에서 this를 써주면 이 연결이 사라진다고… 아무튼 콘솔로 확인해본결과 undifined가 나오고 진짜 작동이 안된다. 그래서 이것을 해결하는 방법이 세가지 있는데 아래코드에서 알아보도록 하자.
첫번째로 constructor를 사용하는 방법이다.

class Counter extends Component {

    constructor(props){
        super(props); //1. undifined를 해결하는 일반적인 방법.
        this.handleIncrease = this.handleIncrease.bind(this);
        this.handleDecrease = this.handleDecrease.bind(this);
    }

    handleIncrease(){ //컴포넌트에 커스텀 매서드 만들기
        console.log(this); // -> 0. undifined나옴 , 아래 이벤트때문에 연결이 해제됨.
        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>
        );
    }
}

두번째로 함수를 화살표형 함수로 변경해주는 방법이다.

class Counter extends Component {

    handleIncrease = () => { //화살표함수로 바꿔줌
        console.log(this); 
        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>
        );
    }
}

이제 this를 다시 연결시켜줬으니 버튼이 작동하게끔 코드를 완성시켜보자.

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { //constructor에서는 무조건 객체형태여야함.
            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>
        );
    }
}

아까 사용했던 constructor를 사용해서 그 안에 state객체를 넣어주고 상태를 관리하게 해준다. (여기서는 배열이나 다른건 안되고 꼭 객체여야함) 이대로 리액트를 실행시켜보면 잘 작동하는 것을 볼 수 있다. 위처럼 constructor 내부에서 state를 사용할수도 있지만 바로 state의 값을 지정해서 사용해줄수도있다.

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>
        );
    }
}

이것들을 쓰는 것들은 정식 자바스크립트는 아니다(state를 꺼내쓰는 것과 화살표함수를 선언하는 것). class properties라고 해서 바벨 플러그인을 통해 사용할수있다. 리액트에는 이것들이 포함되어 있어서 여기에서 써도 문제가 없다.

그리고 만약에 함수 내에서 setState를 여러번 업데이트하고 싶다면 함수형 업데이트형식으로 사용해줘야한다는 점을 기억하자.

오늘은 여기까지..
시청 영상 30강 28~29까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp