기존 클래스형에서 리액트 Hook이 새롭게 추가 되었다. 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 사용할 수 있다.

여기서useState는 Hook에서 처음 배우게 될 함수이다.

✔️클래스와 함수형 비교

1. state 변수 선언하기

클래스 컴포넌트

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

• 클래스형은 constructor 안에서 this.state를 count:0으로 초기화 했다.

함수 컴포넌트

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

• 함수는 this를 가질 수 없기 때문에 대신에 useState Hook을 직접 컴포넌트에 호출한다.

• 여기서 useState호출한다 라는 것은 state 변수를 선언할 수 있다. 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다.

• useState의 인자로 넘겨주는 값은 state의 초기값이다.(2개의 다른 변수를 저장하려면 useState()를 두 번 호출해야 한다.)

• useState는 state변수, 해당 변수를 갱신할 수 있는 함수 두 가지를 반환한다.
  
  

2. state 가져오기

클래스 컴포넌트

  <p>You clicked {this.state.count} times</p>

• this.state.count 를 사용한다.

함수 컴포넌트

  <p>You clicked {count} times</p>

• 반면 함수 컴포넌트는 count를 직접 사용할 수 있다.

3. state 갱신하기

클래스 컴포넌트

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

• 클래스 컴포넌트는 count를 갱신하기 위해 this.setState()를 호출한다.

함수 컴포넌트

  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

• 반면 함수 컴포넌트는 setcount와 count변수를 가지고 있으므로 this를 호출하지 않아도 된다.