[React] 초급 개념4 - 이벤트 핸들링 (onClick, onChange 등)

리액트에서 사용자 입력을 처리하기 위해서는 이벤트 핸들링을 사용해야 합니다. onClick, onChange 등 다양한 이벤트를 활용하여 UI와 상호작용할 수 있습니다.

---

 

 

🔸 1. 이벤트 핸들링이란?

리액트에서는 HTML 이벤트(onclick, onchange 등)를 camelCase(onClick, onChange) 형태로 작성하며, 함수 형태의 핸들러를 전달해야 합니다.

 

✅ 이벤트 핸들링의 특징

• 이벤트 이름은 camelCase 형식 (onClick, onChange 등)
• 이벤트 핸들러는 함수로 전달해야 함 (handleClick 등)
• return false로 기본 동작을 막을 수 없음 → event.preventDefault() 사용 필요
• SyntheticEvent를 사용하여 브라우저 간 호환성을 유지

---

 

 

🔸 2. 클릭 이벤트 (onClick)

클릭 이벤트는 버튼 또는 특정 요소가 클릭될 때 실행되는 이벤트입니다.

 

✅ 예제: 버튼 클릭 이벤트

function ClickButton() {
  function handleClick() {
    alert("버튼이 클릭되었습니다!");
  }
  
  return <button onClick={handleClick}>클릭</button>;
}

 

📌 설명:

• onClick 속성에 handleClick 함수를 전달하여 클릭 이벤트를 처리합니다.
• 사용자가 버튼을 클릭하면 handleClick 함수가 실행됩니다.

 

💡 추가 팁:

• onClick 핸들러 안에서 setState를 호출하면 상태가 즉시 업데이트됩니다.

---

 

🔸 3. 입력값 변경 이벤트 (onChange)

사용자가 입력 필드에 입력할 때마다 값을 업데이트해야 하는 경우 onChange 이벤트를 사용합니다.

 

 

✅ 예제: 입력 필드 값 변경

import { useState } from "react";

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

  function handleChange(event) {
    setText(event.target.value);
  }

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

 

📌 설명:

• onChange 이벤트를 사용하여 사용자의 입력값을 상태에 반영합니다.
• event.target.value를 사용하여 현재 입력값을 가져옵니다.

💡 추가 팁:

• 여러 개의 입력 필드를 관리할 때 useState를 객체 형태로 사용할 수 있습니다.

---

 

 

🔸 4. 폼 제출 이벤트 (onSubmit)

폼을 제출할 때 기본적으로 페이지가 새로고침되므로, event.preventDefault()를 사용하여 이를 방지합니다.

 

 

✅ 예제: 폼 제출 처리

function FormSubmit() {
  function handleSubmit(event) {
    event.preventDefault();
    alert("폼이 제출되었습니다!");
  }

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

 

 

📌 설명:

• event.preventDefault()를 사용하여 기본 폼 제출 동작을 방지할 수 있습니다.
• 이 방법을 활용하면 백엔드로 데이터를 전송하기 전 유효성 검사를 할 수 있습니다.

💡 추가 팁:

• onSubmit과 onChange를 함께 사용하면 실시간으로 입력값을 검증할 수 있습니다.

---

 

 

🔸 5. 마우스 및 키보드 이벤트

 

 

✅ 예제: 마우스 이벤트 (onMouseEnter, onMouseLeave)

function HoverBox() {
  function handleMouseEnter() {
    console.log("마우스를 올렸습니다!");
  }
  
  function handleMouseLeave() {
    console.log("마우스를 뗐습니다!");
  }

  return <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ padding: "20px", backgroundColor: "lightblue" }}>마우스를 올려보세요</div>;
}

 

📌 설명:

• onMouseEnter와 onMouseLeave를 활용하여 마우스 이동 이벤트를 감지할 수 있습니다.

 

 

✅ 예제: 키보드 이벤트 (onKeyDown, onKeyUp)

function KeyLogger() {
  function handleKeyDown(event) {
    console.log(`키 입력: ${event.key}`);
  }

  return <input type="text" onKeyDown={handleKeyDown} placeholder="키를 눌러보세요" />;
}

 

📌 설명:

• onKeyDown을 사용하여 사용자가 입력한 키를 감지할 수 있습니다.

---

 

 

🔸 6. 이벤트 핸들링 최적화

 

✅ 이벤트 핸들러를 화살표 함수로 전달

<button onClick={() => console.log("버튼 클릭!")}>클릭</button>

 

📌 설명:

• 간단한 이벤트 핸들러는 화살표 함수를 사용하여 직접 정의할 수 있습니다.

 

✅ 이벤트 핸들러를 useCallback으로 최적화

import { useState, useCallback } from "react";

function OptimizedComponent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);
  
  return <button onClick={handleClick}>클릭 수: {count}</button>;
}

 

📌 설명:

• useCallback을 사용하면 불필요한 렌더링을 방지할 수 있습니다.

💡 추가 팁:

• useMemo와 함께 사용하면 성능 최적화에 더욱 효과적입니다.

---