react class 형으로 주로 사용을 했었다 .
그런데 Hook 가 React 버전 16.8 에 새로 추가되었습니다.
Hook 를 이용하여 Class 를 작성할 필요가 없어졌습니다.

클래스형 컴포넌트

import React, { Component } from "react";

class Test extends Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        <div>
          <p>test</p>
          <p>{this.state.count}</p>
          <button
            onClick={() => this.setState({ count: this.state.count + 1 })}
          >
            버튼
          </button>
        </div>
      </div>
    );
  }
}
export default Test;

함수형 컴포넌트

import React, { useState } from "react";

const Test = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>클래스 component!!</p>
      <p>현재 카운트 : {count}</p>
      <button onClick={() => setCount(count + 1)}>클릭해줘!</button>
    </div>
  );
};

export default Test;

클래스형에서는 state 를 정의하고 , 상태를 변화시키는 곳에서
this.state.setState() 까지 작성하여 사용하였다면 ,
hooks 는 userState 라는 Hooks 를 사용하여
[count , setCount] = userState(0) 를 작성하고 상태 변화를 시킬 곳에 setCount 를 작성하면 보다 간결하게 사용할 수 있다.