[react] Hooks - useState

React는 UI를 선언적으로 관리할 수 있는 컴포넌트 기반 라이브러리이다. 그 중에서도 상태(State)는 동적인 데이터를 관리하는 데 중요한 역할을 한다. 이때 상태를 쉽게 관리할 수 있도록 도와주는 것이 useState 훅이다.

 

useState란 무엇인가?

useState는 함수형 컴포넌트에서 상태를 관리하기 위한 React hook이다. React 16.8 버전에서 등장한 이 훅은 기존의 클래스형 컴포넌트에서 상태를 관리하던 방식에서 벗어나 함수형 컴포넌트에서도 쉽게 상태를 선언하고 변경할 수 있게 한다.

const [state, setState] = useState(initialState);
/* 
state: 현재 상태의 값을 저장하는 변수
setState: 상태를 변경하는 함수
initialState: 상태의 초기값
*/

useState 사용 방법

기본적으로 useState를 사용하면 컴포넌트 내에서 상태를 선언하고 관리할 수 있다. 이 훅을 호출하면 배열 형태의 두 가지 값이 반환된다. 하나는 현재 상태 값을 나타내는 변수, 다른 하나는 그 상태를 업데이트하는 함수이다.

useState 예시

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수와 setCount라는 상태 업데이트 함수를 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        카운트 증가
      </button>
    </div>
  );
}

export default Counter;

참고문헌

useState – React