1. 이벤트 처리
사용자의 행동(클릭, 입력, 마우스 이동 등)에 반응하는 인터랙티브한 웹사이트를 만들기 위해 React의 이벤트 시스템을 깊이 있게 학습한다.
1.1. React 이벤트 시스템 이해하기
1.1.1. 이벤트란?
이벤트(Event)는 사용자가 웹페이지에서 취하는 행동을 의미한다. 버튼 클릭, 키보드 입력, 마우스 이동 등 모든 상호작용이 이벤트다.
• → 초인종이 울린다(반응)
• → TV 채널이 바뀐다(반응)
• → 무언가 실행된다(반응)
React에서는 이런 "반응"을 라는 함수로 정의한다.
1.1.2. HTML vs React 이벤트 비교
| 구분 | HTML | React |
|---|---|---|
| 이벤트명 | 소문자 onclick |
카멜케이스 onClick |
| 핸들러 | 문자열 "handleClick()" |
함수 {handleClick} |
| 기본 동작 방지 | return false |
e.preventDefault() |
// HTML 방식
<button onclick="handleClick()">클릭</button>
// React 방식
<button onClick={handleClick}>클릭</button>
onClick={handleClick()} ❌ 잘못됨!
onClick={handleClick} ✅ 올바름!
괄호를 붙이면 함수가 즉시 실행된다.
function Button() {
const handleClick = () => {
console.log("클릭됨");
};
return (
<div>
{/* ❌ 렌더링 시 즉시 실행 */}
<button onClick={handleClick()}>잘못된 예</button>
{/* ✅ 클릭 시에만 실행 */}
<button onClick={handleClick}>올바른 예</button>
</div>
);
}1.2. 클릭 이벤트
1.2.1. 기본 클릭 이벤트
function ClickExample() {
const handleClick = () => {
alert("클릭됨");
};
return (
<div>
<button onClick={handleClick}>버튼 1</button>
<button onClick={() => alert("버튼 2")}>버튼 2</button>
</div>
);
}1.2.2. 인자가 있는 함수 호출
function ButtonList() {
const handleClick = (name) => {
alert(`${name} 클릭됨`);
};
return (
<div>
{/* ✅ 올바름: 화살표 함수로 감싸기 */}
<button onClick={() => handleClick("빨강")}>빨강</button>
<button onClick={() => handleClick("파랑")}>파랑</button>
</div>
);
}
1.3. 폼 이벤트
1.3.1. onChange 이벤트
function InputExample() {
const handleChange = (e) => {
console.log("입력값:", e.target.value);
};
return (
<div>
<input
type="text"
onChange={handleChange}
placeholder="입력하세요"
/>
</div>
);
}
1.3.2. onSubmit 이벤트
function FormExample() {
const handleSubmit = (e) => {
e.preventDefault(); // 페이지 새로고침 방지
alert("제출됨");
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="이름" />
<button type="submit">제출</button>
</form>
);
}