이벤트 핸들링: 알아두면 일당백! 🎯

이벤트 핸들링, 무엇이고, 어떻게 사용할까? 🎯

이벤트 핸들링은 웹 개발에서 빠질 수 없는 기본 중의 기본!

버튼 클릭, 키보드 입력, 마우스 움직임 같은 사용자와 웹 애플리케이션 간의 상호작용을 처리하는 게 바로 이벤트 핸들링입니다.

오늘은 DOM 이벤트와 React 이벤트 시스템의 차이점, 주의해야 할 점, 실무에서 유용한 팁까지 전부 싹~ 정리해볼게요.

---

이벤트란 무엇인가요? 🧐

이벤트는 “사용자와 브라우저 간의 대화”라고 할 수 있어요.

예를 들어 사용자가 버튼을 클릭하면, 브라우저는 “지금 클릭했어!“라는 신호(이벤트)를 알려주는 거죠.

이벤트 처리 흐름

1. 이벤트 발생: 사용자가 버튼을 클릭하거나 키보드를 누름
2. 이벤트 전달: 브라우저가 해당 이벤트를 DOM(Document Object Model) 요소에 전달
3. 이벤트 핸들링: 개발자가 정의한 이벤트 핸들러가 실행되어 특정 로직을 수행

이벤트(Event)는 사용자가 웹 페이지에서 발생시키는 행동(클릭, 스크롤, 키보드 입력 등)을 말합니다. 브라우저는 이벤트를 감지하고, 이를 처리할 수 있도록 이벤트 핸들러에 전달합니다.

---

DOM 이벤트와 이벤트 종류 🌐

DOM 이벤트란?

DOM 이벤트는 HTML 요소에서 발생하는 모든 이벤트를 말합니다.

예를 들어 <button>을 클릭하면 onclick 이벤트가 발생합니다.

 

DOM에서 이벤트는 아주 다양해요. 아래는 많이 쓰이는 이벤트를 정리해봤어요.

주요 DOM 이벤트 종류

1. 마우스 이벤트:
   • click: 클릭할 때 발생
   • dblclick: 더블 클릭
   • mousedown: 마우스 버튼을 누를 때
   • mouseup: 마우스 버튼을 뗄 때
   • mousemove: 마우스 움직임
2. 키보드 이벤트:
   • keydown: 키를 누를 때 발생
   • keyup: 키를 뗄 때 발생
   • keypress: 키를 누르고 있을 때 발생(점차 사용되지 않음)
3. 포커스 이벤트:
   • focus: 요소가 포커스를 받을 때
   • blur: 요소가 포커스를 잃을 때
4. 폼 이벤트:
   • submit: 폼 제출 시 발생
   • change: 입력 요소의 값이 변경될 때
   • input: 입력 필드의 값이 변경될 때
5. 기타 이벤트:
   • load: 페이지가 로드될 때
   • resize: 창 크기가 변경될 때
   • scroll: 페이지 스크롤 시

---

React의 이벤트 시스템 🎛️

React는 DOM 이벤트를 기반으로 자체 이벤트 시스템을 제공합니다. 이 시스템은 SyntheticEvent라는 추상화 래핑 시스템을 사용하여 모든 브라우저에서 일관된 동작을 보장합니다. 이는 브라우저마다 다르게 동작할 수 있는 이벤트를 통일된 방식으로 제공하기 위해 만들어졌답니다.

React 이벤트의 특징

1. SyntheticEvent 사용: DOM 이벤트를 래핑한 객체로, 브라우저 간 호환성을 보장합니다.
2. 이벤트 위임(Event Delegation): React는 루트 요소에서 모든 이벤트를 청취하고, 이를 필요한 컴포넌트로 위임해 성능 최적화를 꾀해요.

---

React에서 이벤트 핸들링 🔧

React에서 이벤트를 처리하려면 JSX 속성으로 이벤트 핸들러를 연결하면 돼요.

하지만 DOM 이벤트와는 몇 가지 차이가 있어요.

React 이벤트 핸들링의 주의사항

• 카멜 표기법 사용: React는 DOM 이벤트의 속성명(onclick, onchange) 대신 카멜 표기법(onClick, onChange)을 사용합니다.

<button onClick={handleClick}>클릭하세요</button>

 

• 함수 형태의 값 전달: 이벤트 핸들러는 함수 형태로 전달해야 합니다. 함수 호출 결과를 전달하지 않도록 주의하세요.

// 잘못된 예
<button onClick={handleClick()}>클릭</button>

// 올바른 예
<button onClick={handleClick}>클릭</button>

 

• DOM 요소에만 이벤트 설정 가능: React 이벤트는 DOM 요소(<div>, <button>)에만 적용되며, 사용자 정의 컴포넌트에는 적용되지 않습니다. 사용자 정의 컴포넌트에서 이벤트를 사용하려면 props로 전달해야 합니다.

---

React에서 지원하는 주요 이벤트와 예제 📋

1. 폼 이벤트

function FormExample() {
  const handleSubmit = (event) => {
    event.preventDefault(); // 폼 제출 기본 동작 막기
    console.log("Form Submitted");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">제출</button>
    </form>
  );
}

2. 마우스 이벤트

function MouseExample() {
  const handleMouseOver = () => {
    console.log("마우스 오버!");
  };
return <div onMouseOver={handleMouseOver}>여기에 마우스를 올려보세요!</div>;
}

3. 키보드 이벤트

function KeyboardExample() {
  const handleKeyDown = (event) => {
    console.log(`Key Pressed: ${event.key}`);
  };
  return <input type="text" onKeyDown={handleKeyDown} placeholder="키를 눌러보세요" />;
}

 

4. 포커스 이벤트

function FocusExample() {
  const handleFocus = () => {
    console.log("Input Focused!");
  };
  const handleBlur = () => {
    console.log("Input Blurred!");
  };
  return <input onFocus={handleFocus} onBlur={handleBlur} placeholder="포커스를 줘보세요" />;
}

실무에서 유용한 이벤트 예제: 복합 상태 관리

import React, { useState } from "react";

function MultiStateExample() {
  const [form, setForm] = useState({ username: "", email: "" });
  const handleChange = (event) => {
    const { name, value } = event.target;
    setForm((prevForm) => ({ ...prevForm, [name]: value }));
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Submitted Form:", form);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={form.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        type="email"
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

---

이벤트가 동작하는 원리 🌀

React는 이벤트를 루트 DOM 노드에 바인딩하고, 이벤트 버블링을 통해 하위 요소에서 발생한 이벤트를 처리합니다.

따라서 모든 이벤트는 SyntheticEvent로 캡처되고, React의 이벤트 핸들러로 전달돼요.

---

자주 마주치는 에러와 해결법 🛠️

1. handleClick is not a function
   • 핸들러를 전달할 때 함수를 호출하거나 잘못된 값을 전달했을 가능성이 큼
   • 해결: <button onClick={handleClick}>로 올바르게 전달하기
2. “Maximum update depth exceeded”
   • 이벤트 핸들러에서 상태를 변경할 때, 무한 루프를 유발할 가능성이 있음
   • 해결: 상태 업데이트가 조건에 따라 실행되도록 코드 수정

---

정리 🌟

• 이벤트 핸들링은 사용자와의 소통을 위한 중요한 기술입니다.
• React는 DOM 이벤트를 기반으로 한 SyntheticEvent 시스템을 사용해 래핑하여 브라우저 간 호환성을 제공합니다.
• 주의할 점:
  • 카멜 표기법 사용 (onClick, onChange)
  • 핸들러는 함수 자체로 전달.
  • DOM 요소에만 이벤트 설정
  • 사용자 정의 컴포넌트에는 props로 이벤트 전달.
  • 실무에서는 복합 상태 관리와 함께 사용하면 더욱 유용해요.

React는 다양한 이벤트를 지원하며, 이를 적절히 활용하면 더 나은 사용자 경험을 제공할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당! 🌷