React에서의 이벤트 처리와 상태 변화

 

React에서 이벤트 처리와 상태(state) 변화를 어떻게 다루는지 알아보겠습니다.
웹 앱에서 사용자와의 상호작용은 필수적인 요소이므로 꼭 익혀야 하는 개념입니다.

---

React에서 이벤트 처리란?

React에서는 HTML과 비슷한 방식으로 이벤트를 처리하지만, 문법은 조금 다릅니다.

• HTML: onclick="함수명()"
• React: onClick={함수}

기본 예제: 버튼 클릭 이벤트

function ClickExample() {
  const handleClick = () => {
    alert('버튼을 클릭했습니다!');
  };

  return (
    <button onClick={handleClick}>클릭해보세요</button>
  );
}

React에서는 onClick, onChange, onSubmit 등 여러 이벤트 핸들러를 JSX 안에서 직접 사용할 수 있습니다.

---

상태(state) 변화 처리

React에서는 useState 훅을 사용해 컴포넌트의 상태를 정의하고, 이벤트를 통해 그 상태를 변경할 수 있습니다.

예제: 클릭할 때마다 숫자 증가

import { useState } from 'react';

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

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

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={increase}>+1</button>
    </div>
  );
}

useState를 통해 count 상태를 정의하고, setCount()를 통해 상태를 변경하면 컴포넌트가 자동으로 다시 렌더링됩니다.

---

입력 폼 이벤트 처리

사용자의 입력을 상태에 반영하고 싶다면 onChange 이벤트를 사용합니다.

예제: 입력한 값 표시하기

import { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input value={text} onChange={handleChange} />
      <p>입력한 값: {text}</p>
    </div>
  );
}

사용자의 입력값을 상태에 반영하고, 그 값을 그대로 출력할 수 있습니다.

---

이벤트와 상태는 React의 핵심

React는 사용자 인터랙션을 처리하고, 상태를 기준으로 화면을 동적으로 업데이트합니다.
이벤트와 상태 변화는 React의 중심이 되는 개념이며, 이를 바탕으로 더 복잡한 UI도 구현할 수 있습니다.