[React] React.useState

✅ React.useState란?

useState는 React 함수형 컴포넌트에서 상태 값을 선언하고 제어할 수 있게 해주는 함수입니다.

📦 기본 문법

const [state, setState] = React.useState(초기값);

구성 :

항목	설명
state	현재 상태 값
setState	상태를 업데이트하는 함수
초기값	state의 초기값 (숫자, 문자열, 배열, 객체 등 가능)

 

🧪 예제

import React from 'react';

function Counter() {
  const [count, setCount] = React.useState(0); // 초기값 0

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

결과:

• 초기 상태 count = 0
• 버튼 클릭 시 setCount(count + 1)이 실행되고,
• React는 컴포넌트를 자동으로 다시 렌더링합니다.

🔄 작동 흐름 요약

1. useState(0) → count = 0으로 초기화
2. 사용자가 버튼 클릭 → setCount(1) 실행
3. 상태 값이 바뀌었으므로 React가 자동으로 화면을 다시 그림