📘 리액트 강의 3편 - 이벤트 처리와 상태 관리 (useState)

이제부터 리액트의 진짜 재미를 느낄 수 있는 부분!
React는 단순히 화면만 그리는 게 아니라, **상태(state)**를 가지고 UI를 동적으로 업데이트할 수 있습니다.
이번 시간에는 React의 상태관리 훅인 useState와 이벤트 처리 방식을 익혀봅니다.

---

1. 리액트에서의 이벤트 처리

리액트는 DOM 이벤트를 처리할 수 있게 도와주는 방식이 존재합니다. 다만 HTML과는 약간 다릅니다.

기본 사용법

<button onClick={handleClick}>클릭</button>

• 이벤트 이름은 camelCase(onclick → onClick)
• 값으로는 문자열이 아닌 함수를 전달

function handleClick() {
  alert('버튼이 클릭되었습니다!');
}

---

2. useState 훅으로 상태 관리하기

상태는 컴포넌트 안에서 변화하는 값입니다.
React에서는 useState를 사용해 상태를 만들고 관리합니다.

기본 문법

const [상태값, 상태변경함수] = useState(초기값);

---

3. 예제: 좋아요 버튼 만들기

import { useState } from "react";

function App() {
  const [likes, setLikes] = useState(0);

  const handleClick = () => {
    setLikes(likes + 1);
  };

  return (
    <div>
      <h1>좋아요 수: {likes}</h1>
      <button onClick={handleClick}>좋아요 ❤️</button>
    </div>
  );
}

결과

• 버튼 클릭할 때마다 likes 상태가 증가하고, 화면도 자동 갱신됩니다.
• 이것이 바로 리액트의 상태 기반 렌더링입니다!

---

4. 예제: 입력값 실시간 표시하기

import { useState } from "react";

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>입력한 값: {text}</p>
    </div>
  );
}

• onChange 이벤트로 사용자의 입력을 감지하고 상태에 반영합니다.
• 실시간으로 상태가 반영되면서 UI도 같이 바뀝니다.

---

마무리

이제 여러분은 React에서 상태를 만들고 변경하며, 그에 따라 UI를 자동으로 업데이트할 수 있게 되었습니다.
이벤트 처리와 상태 관리는 리액트 앱의 기본 동작 원리이자 핵심 기능입니다.