[React] 훅(Hook) - useState

 

 

1. 정의

- 가장 대표적이고 많이 사용되는 훅

- 클래스 컴포넌트가 state를 사용하는 것처럼 함수 컴포넌트에서는 useState() 훅을 사용함

 

 

2. 사용방법

- useState()를 호출할 때 파라미터로 선언할 state의 초기값이 들어감
- useState(초기값)을 호출하면 배열을 리턴함
- 리턴한 배열에는 state로 선언된 변수, state의 set함수 두 가지 항목이 들어있음

 

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

 

 

3.  useState 사용했을 때와 사용하지 않았을 때 비교

- useState를 사용하지 않은 코드

import React, { useState } from "react";

// Counter 함수 컴포넌트
function Counter(props) {
    var count = 0;

    return (
        <div>
            {/* 버튼 클릭 시 카운트를 하나씩 증가시키고 현재 카운트를 보여주지만 
            재렌더링하지 않아 새로운 카운트 값이 화면에 표시되지 않음*/}
            <p>총 {count}번 클릭했습니다.</p> 
            <button onClick={() => count++}>
                클릭
            </button>
        </div>
    );
}

 

- useState()를 사용하는 코드 

mport React, { useState } from "react";

// Counter 함수 컴포넌트
function Counter(props) {
    const[count, setCount] = useState(0);

    return (
        <div>
            {/* 버튼 클릭 시 카운트를 하나씩 증가시키고 현재 카운트를 보여주고
            count의 값이 변경되면 컴포넌트가 재렌더링되면서 화면에 새로운 카운트 값 표시*/}
            <p>총 {count}번 클릭했습니다.</p> 
            <button onClick={() => setCount(count+1)}>
                클릭
            </button>
        </div>
    );
}

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