React에서 사용자와 소통하기: 이벤트와 입력 다루기

웹 애플리케이션의 진짜 가치는 사용자의 행동에 빠르고 유연하게 반응하는 데 있습니다. React는 이런 상호작용을 우아하게 처리할 수 있도록 자체 이벤트 시스템과 입력 관리 방식을 제공합니다. 이번 장에서는 마우스 클릭, 키보드 입력, 폼 제출 등 실전에서 자주 쓰이는 이벤트와 사용자 입력을 실용적으로 다루는 법을 알아봅니다.

React의 이벤트 시스템 이해하기

React의 이벤트는 브라우저의 원시 DOM 이벤트와 조금 다릅니다. 내부적으로 'SyntheticEvent'라는 추상 레이어를 활용해 크로스브라우징 이슈를 최소화하고, 일관된 인터페이스를 제공합니다. 예를 들어 버튼 클릭을 처리할 때에는 onClick 속성을 컴포넌트에 바로 부여합니다.

function MyButton() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }
  return <button onClick={handleClick}>클릭하세요</button>;
}

이처럼 이벤트 핸들러 함수는 주로 컴포넌트 내부에 정의하고, 이름은 관례적으로 handle로 시작합니다. 이벤트가 발생하면 해당 함수가 자동으로 호출되어 필요한 동작을 수행합니다.

사용자 입력 관리의 기본

입력창이나 폼의 값을 React에서 실시간으로 관리하려면 상태(state)를 활용해야 합니다. 상태를 입력 요소에 연결하면, 사용자의 변경 사항이 곧바로 컴포넌트의 데이터로 반영됩니다. 이를 '제어 컴포넌트'(controlled component)라 부릅니다.

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  function handleChange(e) {
    setName(e.target.value);
  }
  return (
    <input value={name} onChange={handleChange} placeholder="이름을 입력하세요" />
  );
}

위 예시처럼, input의 value는 state와 연결되고, onChange 이벤트에서 입력값을 즉시 state로 갱신합니다. 이런 방식으로 애플리케이션은 사용자의 입력을 완전히 통제할 수 있습니다.

폼과 입력값 제출 처리

React에서 폼 제출(예: 회원가입 폼)도 이벤트로 관리합니다. HTML에서와 달리, React에서는 폼 제출 시 새로고침(기본 동작)을 막고, state에 저장된 데이터를 활용해 원하는 처리를 수행합니다.

function SignupForm() {
  const [email, setEmail] = useState('');
  function handleSubmit(e) {
    e.preventDefault(); // 새로고침 막기
    alert(`입력한 이메일: ${email}`);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} placeholder="이메일" />
      <button type="submit">제출</button>
    </form>
  );
}

폼 제출 시에는 반드시 e.preventDefault()를 호출해 불필요한 페이지 새로고침을 막는 것이 관례입니다.

실전에서 알아야 할 이벤트 핸들링의 원칙

• 이벤트 핸들러는 불필요하게 렌더링마다 새로 만들지 않도록 가능하면 컴포넌트 안 함수로 선언합니다.

• 기본 이벤트 객체(e)에는 다양한 정보가 담겨 있으므로, 필요한 속성만 골라 써야 합니다.

• 입력값이 많아질 때는 객체 형태로 상태를 관리하면 코드가 단순해집니다.

• 이벤트 버블링, 캡처링 등 웹 이벤트 흐름의 기초도 함께 숙지하면 문제 해결에 도움이 됩니다.

마치며: React와 상호작용의 진짜 매력

React의 이벤트 처리와 입력 관리는 초보자에게 조금 낯설 수 있으나, 그 원리를 익히면 복잡한 사용자 경험도 손쉽게 구현할 수 있습니다. 클릭, 입력, 제출 등 모든 순간에 컴포넌트는 살아 움직이고, 여러분의 아이디어가 화면 위에 자연스럽게 펼쳐집니다. 이제 다음 단계에서는 이러한 이벤트 로직을 더욱 세련되게 확장하는 방법을 배워봅니다.