React – 이벤트와 폼 – 이벤트 처리 – 0 – 기본 이벤트 처리 방식 (onClick 등)

작성자 wooah
React – 이벤트와 폼 – 이벤트 처리 – 0 – 기본 이벤트 처리 방식 (onClick 등)

React – 이벤트와 폼 – 이벤트 처리 – 0 – 기본 이벤트 처리 방식 (onClick 등)

안녕하세요 여러분 😊
이번에는 React에서 이벤트를 처리하는 기본 방식에 대해 함께 배워보려고 해요!
HTML에서는 xss-onclick="..." 처럼 문자열로 이벤트를 처리했지만, React에서는 좀 더 JavaScript에 어울리는 방식으로 다뤄요.

마치 우리가 버튼을 누르면 기계가 정해진 동작을 수행하듯
React 컴포넌트 안에서도 “이벤트”를 감지해서 특정 함수를 호출하게 되는 구조랍니다!

1. React의 이벤트 처리 방식이란?

✅ HTML vs React 비교

항목 HTML 방식 React 방식
문법 <button xss-onclick="doSomething()"> <button onClick={doSomething}>
타입 문자열 함수
대소문자 모두 소문자 camelCase (onClick)

React에서는 이벤트 이름이 소문자 → 낙타표기법(camelCase) 으로 바뀌고,
실제로 이벤트 핸들러로 함수를 넘긴다는 점이 핵심입니다!

2. 기본 onClick 이벤트 예시

function HelloButton() {
  const handleClick = () => {
    alert('안녕하세요! 👋');
  };

  return (
    <button onClick={handleClick}>인사하기</button>
  );
}
  • handleClick이라는 함수를 만들고
  • JSX에서 onClick={함수이름} 형태로 이벤트 등록

👉 버튼을 누르면 alert이 실행돼요!

3. 다양한 이벤트 종류들

React에서는 브라우저의 거의 모든 이벤트를 처리할 수 있어요.

이벤트 이름 설명
onClick 클릭
onChange 입력값 변경 (input, select 등)
onSubmit 폼 제출
onMouseEnter 마우스 진입
onMouseLeave 마우스 이탈
onKeyDown 키보드 눌림
onFocus, onBlur 포커스 얻음/잃음

4. 이벤트 객체 사용 (e)

React에서는 이벤트가 발생했을 때 이벤트 객체(e) 를 받아서
더 세밀한 제어를 할 수 있어요!

✅ 예제: 클릭 좌표 알아내기

function CoordinateButton() {
  const handleClick = (e) => {
    alert(`마우스 좌표: X=${e.clientX}, Y=${e.clientY}`);
  };

  return (
    <button onClick={handleClick}>좌표 확인</button>
  );
}
  • e는 SyntheticEvent라는 React 전용 이벤트 객체
  • e.clientX, e.clientY로 마우스 위치 확인 가능!

🎯 HTML에서의 이벤트 객체와 거의 비슷하지만, React에서 성능 최적화를 위해 약간 감싸진 객체예요!

5. 인자 전달하기 (함수 안에서 매개변수 전달)

이벤트 핸들러에 인자를 넘기고 싶을 땐 화살표 함수로 감싸야 해요!

❌ 잘못된 방식

// 이렇게 쓰면 컴포넌트 렌더 시점에 바로 실행됨
<button onClick={myFunc(param)}>실행</button>

✅ 올바른 방식

<button onClick={() => myFunc(param)}>실행</button>

예제

function ProductButton({ product }) {
  const handleBuy = (name) => {
    alert(`${name} 상품을 구매합니다!`);
  };

  return (
    <button onClick={() => handleBuy(product.name)}>구매하기</button>
  );
}

6. 이벤트 기본 동작 막기 (preventDefault)

form을 제출하면 새로고침되죠? React에서는 그 기본 동작을 막아야 해요!

function SubmitForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('폼이 제출되었습니다!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="이름 입력" />
      <button type="submit">제출</button>
    </form>
  );
}
  • e.preventDefault()로 기본 동작 차단
  • React에서는 이걸 꼭 직접 막아줘야 해요

7. 여러 이벤트 핸들러 사용하기

여러 개의 이벤트를 같은 컴포넌트에서 처리할 수 있어요.

function EventBox() {
  const handleFocus = () => console.log('포커스 됨!');
  const handleBlur = () => console.log('포커스 잃음!');
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      alert('Enter 입력됨!');
    }
  };

  return (
    <input
      onFocus={handleFocus}
      onBlur={handleBlur}
      onKeyDown={handleKeyDown}
      placeholder="입력해보세요"
    />
  );
}

이처럼 마우스, 키보드, 포커스 이벤트 등을 자유롭게 조합할 수 있어요!

8. 컴포넌트에 이벤트 함수 나눠서 정리하기

컴포넌트가 길어지면 이벤트 핸들러를 분리해서 가독성을 높여야 해요!

function UserActions() {
  const handleLogin = () => console.log('로그인 시도!');
  const handleLogout = () => console.log('로그아웃!');

  return (
    <div>
      <button onClick={handleLogin}>로그인</button>
      <button onClick={handleLogout}>로그아웃</button>
    </div>
  );
}

함수로 분리해두면 테스트도 쉽고 유지보수도 훨씬 좋아요!

✅ 마무리 요약

포인트 설명
JSX에서 이벤트는 onClick={함수} 형식 HTML의 xss-onclick="..."과 다름
함수는 직접 실행하지 말고 참조만 전달 onClick={handleClick}
인자 전달 시 화살표 함수 사용 onClick={() => handleClick(param)}
e.preventDefault()로 기본 동작 차단 가능 폼 제출 시 유용
이벤트 종류는 다양 클릭, 키보드, 포커스 등 모든 DOM 이벤트 다 사용 가능

🚨 주의할 점

  • onClick={handleClick()}처럼 함수 괄호 붙이면 렌더링 시 바로 실행됨
  • 이벤트 핸들러는 꼭 컴포넌트 안에서 정의하거나 외부에서 불러와야 함
  • JSX 문법은 JS와 HTML의 중간 형태이므로 익숙해질 필요 있어요

🎁 마무리 한마디

React에서 이벤트를 다룬다는 건 마치 전기 버튼과 전등을 연결하는 것과 같아요!
버튼만 눌러도 불이 들어오게 하듯, 이벤트만 잘 연결하면 사용자 경험이 훨씬 풍부해진답니다 ✨

다음 시간에는 폼 요소(input, select 등)와 onChange 이벤트의 조합을 배워볼게요!
조금씩 React의 매력에 빠져들 준비되셨죠? 😄

함께 화이팅입니다! 🚀💙

답글 남기기