useState와 이벤트 핸들링

1️⃣ UseState 기본 개념

💡 정의

• useState는 React의 Hook 중 하나로, 컴포넌트 안에서 상태를 관리할 수 있게 해준다.
• React는 단순히 화면을 그리는 게 아니라, 상태(state) 를 관리하고 이벤트를 통해 상태를 업데이트 할 수 있다.

🧩 문법 및 사용법

import { useState } from "react";

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

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

• count : 현재 상태 값
• setCount : 상태를 변경하는 함수
• 0 : 초기값

🎯 정리

• 상태(count) 는 컴포넌트의 기억장치, setCount는 기억을 새로 덮어쓰는 도구

---

2️⃣ 이벤트 핸들링 (Event Handling)

React에서 이벤트를 다루는 방법은 일반 JS와 조금 다르다.

• HTML
  <button>클릭</button>
• React
  <button onClick={handleClick}>클릭</button>

문자열이 아닌 함수 참조 를 전달해야 한다.

💡 함수 참조?

• 함수의 이름만 전달해서, 필요할 때 실행되도록 넘겨주는 것.
• HTML에서는 함수 실행을 진행한다.
• React에서 함수 실행 방식을 사용하면 화면이 렌더링되는 순간에 바로 사용 된다.

🧩 문법 및 사용법

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

  const handleClick = () => {
    setCount(count + 1);
  };

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

⚠️ 주의 사항

대표적으로 두가지가 있다.

1. 함수 바로 실행

<button onClick={handleClick()}>잘못된 예시 ❌</button>

이 방식은 화면이 렌더링 되자마자 함수가 실행된다.

<button onClick={handleClick}>올바른 예시 ✅</button>

2. 상태 업데이트가 즉각 반영되지 않음

React의 상태 업데이트는 비동기적으로 처리된다.
이전 값 을 기반으로 업데이트 될 때는 함수형 업데이트를 쓰는게 안전하다.

setCount(prev => prev + 1);

---

💬 정리

• useState는 컴포넌트 안에서 변하는 값을 기억하게 해줌 (유지관리 가능)
• 이벤트 핸들링은 JSX 속성에 함수 참조를 전달하는 방식으로 사용 (함수 실행 X)
• 상태 업데이트는 비동기적이므로, 이전 값을 기반으로 할 때는 함수형 업데이트 활용