[REACT] USESTATE 변수관리법

useState란?

useState는 React에서 컴포넌트의 상태(state)를 관리하기 위한 기본 훅(Hook)입니다.
함수형 컴포넌트에서 변수값을 기억하고 업데이트할 수 있게 해주며, 값이 바뀌면 자동으로 UI를 다시 렌더링합니다.

📌 문법:

const [state, setState] = useState(initialValue);

 

• state: 현재 상태 값
• setState: 상태를 변경하는 함수
• initialValue: 상태의 초기값

🧪 기본 예제 – 카운터 만들기

import React, { useState } from "react";

function Counter() {
  // count라는 상태를 0으로 초기화
  const [count, setCount] = useState(0);

  // +1 증가
  const increase = () => setCount(count + 1);
  // 초기화
  const reset = () => setCount(0);

  return (
    <div>
      <h2>현재 카운트: {count}</h2>
      <button onClick={increase}>+1</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}

export default Counter;

📍 실행 흐름:

• 처음 렌더링 시 count는 0
• 버튼 클릭 시 setCount()가 실행 → 상태 변경
• 상태가 바뀌면 자동으로 다시 렌더링되어 화면의 숫자도 갱신됨

🧪 예제 2 – 토글 상태 관리

import React, { useState } from "react";

function LoginToggle() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <p>{isLoggedIn ? "✅ 로그인 상태" : "🔒 로그아웃 상태"}</p>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "로그아웃" : "로그인"}
      </button>
    </div>
  );
}

export default LoginToggle;

📍 실행 흐름:

• 초기 상태는 false → “로그아웃 상태” 표시
• 버튼 클릭 시 !isLoggedIn으로 상태가 반전 → UI도 자동 변경

---

✅ 정리

• useState는 함수형 컴포넌트에서 상태를 저장·업데이트하는 기본 훅
• 상태 변경 시 자동 렌더링 → DOM 조작 불필요
• 다양한 타입(숫자, 문자열, 배열, 객체 등) 저장 가능
• 이벤트·폼 입력·토글 UI 등에서 가장 자주 사용됨