클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있는 것.

Hook과 같은 기능을 하는 클래스 예시

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Hook과 함수 컴포넌트

Hook은 클래스형 컴포넌트에서 작동하지 않다.

오직 함수형 컴포넌트에서만 사용 가능하다.

Hook이란?

import React, { useState } from 'react';

function Example() {
  // ...
}

Hook은 특별한 함수다. 예를 들어 useState 함수 컴포넌트에서 state를 사용할 수 있게 해준다.

언제 Hook을 사용할까?

함수형 컴포넌트를 사용하던 중 state가 필요할 때

state 변수 선언하기

클래스 컴포넌트와 함수형 컴포넌트를 비교하여 설명한다.

초기화

• 클래스형

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