이벤트 처리하기" – 클릭, 입력 등 사용자 행동에 반응하는 법

React로 화면을 만들다 보면,
“버튼 클릭했을 때 숫자 올리기”
“입력창에 글자를 쓰면 화면에 반영하기”

이런 걸 하고 싶을 때가 많죠!

👉 그럴 때 사용하는 게 바로 이벤트 처리예요!

이번 글에서는
✅ 이벤트란 뭔지
✅ 어떻게 처리하는지
✅ 클릭과 입력 예제
쉽고 간단하게 설명드릴게요.

---

1️⃣ 이벤트란 뭘까요?

이벤트(Event) = 사용자의 행동

예를 들어:

• 버튼 클릭
• 키보드 입력
• 마우스 움직임
• 스크롤

이런 걸 전부 “이벤트”라고 부릅니다!

React에서는
**“이벤트가 일어났을 때 실행할 코드”**를 미리 정해두는 걸
👉 **이벤트 처리(Event Handling)**라고 해요.

---

2️⃣ 클릭 이벤트 처리 (onClick)

버튼을 눌렀을 때 어떤 일이 일어나게 하고 싶다면?

jsx

복사편집

function App() { const handleClick = () => { alert("클릭했어요!"); }; return <button onClick={handleClick}>눌러보세요</button>; }

🔍 설명

• onClick={함수} ← 이게 핵심!
• 버튼을 누르면 handleClick() 함수가 실행돼요.

---

3️⃣ 입력값 실시간 반영 (onChange)

입력창에 글자를 쓰면 바로 화면에 보이게 하려면?

jsx

복사편집

import { useState } from "react"; function App() { const [text, setText] = useState(""); const handleChange = (e) => { setText(e.target.value); }; return ( <div> <input onChange={handleChange} /> <p>입력한 값: {text}</p> </div> ); }

🔍 설명

• onChange는 입력값이 바뀔 때마다 실행돼요
• e.target.value를 통해 현재 입력값을 가져옴
• useState()를 활용해 실시간으로 화면에 보여줌

---

4️⃣ 자주 쓰는 이벤트 종류

이벤트 이름설명

onClick	클릭했을 때
onChange	값이 바뀔 때 (입력창 등)
onSubmit	폼 제출 시
onMouseOver	마우스 올렸을 때
onKeyDown	키보드 누를 때

 

✔️ 모두 camelCase로 작성해야 해요! (onclick ❌ → onClick ✅)

---

✏️ 한 줄 정리

React에서 이벤트 처리는
**“onClick, onChange 등 이벤트 속성에 함수 연결”**하는 방식으로 간단하게 할 수 있어요!
사용자 행동에 반응하려면 꼭 필요한 개념입니다 😊