React에서 useState란? 실용적인 예제로 설명

Source: Dev.to

useState란?

useState는 함수형 컴포넌트가 상태를 관리할 수 있게 해 주는 React Hook입니다. 상태 변수와 상태를 업데이트하는 setter 함수를 반환합니다. setter 함수를 호출하면 React가 업데이트된 상태와 함께 컴포넌트를 다시 렌더링합니다.

기본 문법

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

• state → 현재 값
• setState → 값을 업데이트하는 함수
• initialValue → 초기값

왜 useState가 필요할까요?

React 컴포넌트는 상태가 변하면 다시 렌더링됩니다.

상태가 없을 때:

• 동적인 UI가 없음
• 사용자 상호작용 처리 불가
• 폼 처리 불가
• 토글 기능 부재

상태를 사용하면 UI가 인터랙티브해집니다.

예제 1: 카운터

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    
      
## Count: {count}

       setCount(count + 1)}>Increment
    
  );
}

export default Counter;

여기서 무슨 일이 일어나나요?

• 초기값은 0입니다.
• 버튼을 클릭하면 setCount(count + 1)이 실행됩니다.
• React가 상태를 업데이트합니다.
• 컴포넌트가 다시 렌더링됩니다.
• UI가 자동으로 업데이트됩니다.

예제 2: 토글 버튼

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    
      
## {isOn ? "Light ON 💡" : "Light OFF 🌙"}

       setIsOn(!isOn)}>Toggle
    
  );
}

• false → 초기 상태.
• 버튼을 클릭하면 값이 반전됩니다.
• UI가 즉시 업데이트됩니다.

흔히 쓰이는 경우

• 다크 모드 토글
• 비밀번호 보기/숨기기
• 드롭다운 메뉴
• 모달 열기/닫기