7-1강. Hooks - useState ( )

2023.01.31

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 컴포넌트는 버튼을 클릭하면 카운트를 하나씩 증가시키고
현재 카운트를 보여주는 단순한 컴포넌트이다.

그런데 위처럼 카운트를 함수의 변수로 선언해서 사용하게 되면 버튼 클릭 시 카운트 값을
증가시킬 수는 있지만, 재렌더링이 일어나지 않아
새로운 카운트값이 화면에 표시되지 않게 된다.

따라서 이런 경우에는 state를 사용해서 값이 바뀔 때 마다 재렌더링이 되도록 해야한다.
이럴때 useState( )를 사용한다.

useState( )는 아래와같이 사용한다.

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

이렇게 초깃값을 넣어 useState( )를 호출하면 리턴 값으로 배열이 나온다.

리턴된 배열에는 두 가지 항목이 들어있는데
첫 번째 항목은 state로 선언된 변수이고
두 번째 항목은 해당 state의 set 함수이다.

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>
    );
}

위의 코드는 useeState( )를 사용하여
카운트 값을 state로 관리하도록 만든 것이다.
이 코드에서 state의 변수명과 set 함수가 각각 count,setCount로 되어있는 것을 볼 수 있다.

버튼이 눌렸을 때 setCount( )함수를 호출해서 카운트를 1 증가시킨다.
그리고 count의 값이 변경되면 컴포넌트가 재렌더링되면서 화면에 새로운 카운트 값이 표시된다.

클래스 컴포넌트에서는 setState( )함수 하나를 사용해서 모든 state값을 업데이트할 수 있었지만
useState( )를 사용하는 방법에서는 변수 각각에 대해 set 함수가 따로 존재한다는 것을 기억하자.