React(리액트): class형 컴포넌트(클래스형 컴포넌트), state와 setState

이번에 다루어볼 주제는 class형 컴포넌트이다.

우리가 기존에 컴포넌트를 만들 때는 함수형 컴포넌트로 만들어왔다. class형 컴포넌트는 컴포넌트를 선언하는 또 다른 방식이다. 하지만 class형 컴포넌트는 요즘 잘 사용하지 않는다. 그래도 알아보도록 하자.

 

잘 사용하지 않더라도 알아둘 필요가 있는 이유는 나중에 class형 컴포넌트를 사용하는 프로젝트를 유지 보수하는 일이 

생길 수도 있기 때문이다. 그리고 함수형 컴포넌트 + Hooks로 못하는 작업이 두 개 정도 있긴 하다. 

앞으로 새로운 컴포넌트를 만들 때에는 함수형으로 만드는 것이 맞고, class형 컴포넌트는 꼭 필요한 경우이거나, 예전 프로젝트를 유지 보수할 때 사용하는 것이 옳은 방법이다.

 

Hello.js

function Hello({ color, name, isSpecial }) {
  console.log(name, color);
  return (
    <div
      style={{
        color: color,
      }}
    >
      <b>{isSpecial ? "스페셜하다" : "스페셜하지않다."}</b>
      안녕하세요 {name}
    </div>
  );
}

이전에 작성해주었던 함수형 컴포넌트 Hello를 class형 컴포넌트로 바꾸어 보자.

 

class Hello extends Component {
  render() {
    const { color, isSpecial, name} = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    )
  }
}

다음과 같이 class형 컴포넌트를 선언해준다. class형 컴포넌트에는 render라는 메서드가 있어야 한다.

이 메서드 내부에서는 JSX를 반환해주어야 하고 props를 읽기 위해서는 this.props 키워드를 사용해야 한다.

 

옛날에는 컴포넌트를 만들 때 주로 class형 컴포넌트를 주로 만들었는데 요즘은 함수형 컴포넌트로 만든다.

요즘은 Hooks를 이용해 컴포넌트에서 상태 관리가 가능한데 예전에는 함수형 컴포넌트에서 상태 관리가 전혀 되지

않았고 useEffect와 같은 것도 없었기 때문에 컴포넌트 렌더링 전 후로 어떤 작업을 하고 싶을 때도 함수형 컴포넌트에선

할 수 있는 것이 없었다. 그렇기 때문에 이런 상황에서는 class형 컴포넌트를 사용했지만 이제 Hooks가 생기면서 

useEffect, useState 등을 사용할 수 있게 되었고, class형 컴포넌트는 밀려나게 되었다.

 

static defaultProps = {
    name: '이름'
  };

참고로 다음과 같은 방법으로도 defaultProps를 설정해 줄 수 있다.

 

이번에는 Counter.js를 class형 컴포넌트로 바꾸어보자.

 

Counter.js

import { useReducer } from "react";

function reducer(state, action){
  switch(action.type){
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      throw new Error('Unhandled action');
  }
}

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0)

  const onIncrease = () => {
    dispatch({
      type: 'INCREMENT'
    })
  };
  const onDecrease = () => {
    dispatch({
      type: 'DECREMENT'
    })
  };
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

원래는 다음과 같이 함수형 컴포넌트인 Counter 컴포넌트를

 

Counter.js

import { Component } from "react";

class Counter extends Component {
  state = {
    counter: 0,
    fixed: 1
  }

  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>
        <p>고정된 값: {this.state.fixed}</p>
      </div>
    )
  }
}

export default Counter;

다음과 같이 class형 컴포넌트로 바꿔주었다.