가장 대표적이고 많이 사용되는 훅으로는 useState()가 있습니다. useState()는 이름에서 알 수 있듯이 state를 사용하기 위한 훅입니다. 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않기 때문에, 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState()훅을 사용해야 합니다. 아래 간단한 예제 코드를 한 번 보도록 하겠습니다.

import React, { useState } from "react";

function Counter(props) {
    var count = 0;

    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => count++}>
                클릭
            </button>
        </div>
    );
}

위 코드에는 Counter라는 함수 컴포넌트가 등장합니다. Counter컴포넌트는 버튼을 클릭하면 카운트를 하나씩 증가시키고, 현재 카운트를 보여주는 단순한 컴포넌트입니다. 그런데 만약 위처럼 카운트를 함수의 변수로 선언해서 사용하게 되면 버튼 클릭시 카운트 값을 증가시킬 수는 있겠지만, 재렌더링(Re-rendering)이 일어나지 않아서 새로운 카운트 값이 화면에 표시되지 않게 됩니다. 그래서 이런 경우에는 state를 사용해서 값이 바뀔때마다 재렌더링 되도록 해야하는데, 함수 컴포넌트에는 해당 기능이 따로 없기 때문에 useState()를 사용하여 state를 선언하고 업데이트해야 합니다. useState()는 아래와 같이 사용합니다.

const [변수명, set함수명] = useState(초기값);

useState()를 호출할 때는 파라미터로 선언할 state의 초기값이 들어갑니다. 클래스 컴포넌트의 생성자에서 state를 선언할 때 초기값을 넣어주는 것과 동일한 것이라고 보면 됩니다. 그렇게 초기값을 넣어서 useState()를 호출하게 되면 리턴값으로 배열이 나옵니다. 리턴된 배열에는 두 가지 항목이 들어있는데, 첫 번째 항목은 state로 선언된 변수이고 두 번째 항목은 해당 state의 set함수입니다. 아래 실제로 useState()를 사용하는 코드를 한 번 보도록 하겠습니다.

import React, { useState } from "react";

function Counter(props) {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}>
                클릭
            </button>
        </div>
    );
}

위 코드는 useState()를 사용하여 카운트 값을 state로 관리하도록 만든 것입니다. 위 코드에서 state의 변수명과 set함수가 각각 count, setCount로 되어 있는 것을 볼 수 있습니다. 버튼이 눌렸을 때 setCount() 함수를 호출해서 카운트를 1 증가시킵니다. 그리고 count의 값이 변경되면, 컴포넌트가 재렌더링(Re-rendering)되면서 화면에 새로운 카운트 값이 표시됩니다.

이 과정은 클래스 컴포넌트에서 setState()함수를 호출해서 state가 업데이트 되고, 이후 컴포넌트가 재렌더링 되는 과정과 동일하다고 보면 됩니다. 다만 클래스 컴포넌트에서는 setState()함수 하나를 사용해서 모든 state 값들을 업데이트 할 수 있었지만, useState()를 사용하는 방법에서는 변수 각각에 대해서 set함수가 따로 존재한다는 것을 기억하세요.