728x90
React 이벤트 처리: 상세 가이드
소개
React는 사용자 인터페이스를 구축하기 위한 강력한 JavaScript 라이브러리입니다. 사용자와 상호 작용하는 동적인 웹 애플리케이션을 개발하려면 이벤트 처리가 필수적입니다. 이 글에서는 React에서 이벤트를 처리하는 방법에 대해 자세히 알아보고, 다양한 예시와 함께 핵심 개념을 설명합니다.
React 이벤트의 특징
- 합성 이벤트(Synthetic Event): React는 브라우저의 기본 이벤트 객체를 추상화하여 합성 이벤트 객체를 제공합니다. 이를 통해 브라우저 간의 차이를 해소하고, 일관된 이벤트 처리 방식을 제공합니다.
- camelCase: HTML 속성과 달리, React 이벤트는 onClick, onKeyUp과 같이 camelCase 형식으로 사용합니다.
- JSX: JSX 문법을 사용하여 이벤트 핸들러를 직접 컴포넌트에 연결할 수 있습니다.
이벤트 핸들러 작성
import React, { useState } from 'react';
function MyButton() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<button onClick={handleClick}>클릭: {count}</button>
);
}
- useState 훅을 사용하여 상태를 관리합니다.
- handleClick 함수는 버튼 클릭 시 호출되는 이벤트 핸들러입니다.
- onClick 속성에 handleClick 함수를 연결하여 이벤트를 처리합니다.
728x90
이벤트 객체
이벤트 핸들러 함수에는 이벤트 객체가 첫 번째 인자로 전달됩니다. 이벤트 객체에는 이벤트와 관련된 다양한 정보(예: 이벤트 타입, 타겟 요소, 발생 시각 등)가 포함되어 있습니다.
const handleClick = (event) => {
console.log(event.target.value); // 이벤트가 발생한 요소의 값
};
자주 사용되는 이벤트
- onClick: 클릭 이벤트
- onDoubleClick: 더블 클릭 이벤트
- onMouseOver: 마우스 오버 이벤트
- onMouseOut: 마우스 아웃 이벤트
- onChange: 입력 값 변경 이벤트
- onSubmit: 폼 제출 이벤트
- onKeyDown: 키 다운 이벤트
- onKeyUp: 키 업 이벤트
이벤트 버블링
React에서 이벤트는 자식 요소에서 부모 요소로 버블링됩니다. 이를 이용하여 부모 컴포넌트에서 자식 컴포넌트의 이벤트를 처리할 수 있습니다.
<div onClick={handleClick}>
<button>클릭</button>
</div>
위 코드에서 버튼을 클릭하면 handleClick 함수가 호출됩니다.
이벤트 전파 막기
event.stopPropagation() 메서드를 사용하여 이벤트 전파를 중단할 수 있습니다.
const handleClick = (event) => {
event.stopPropagation();
// ...
};
이벤트 위임
React에서는 이벤트 위임을 사용하여 많은 수의 요소에 동일한 이벤트 핸들러를 효율적으로 연결할 수 있습니다.
<ul>
{items.map((item) => (
<li key={item.id} onClick={() => handleClick(item.id)}>
{item.name}
</li>
))}
</ul>
Form 이벤트 처리
React에서는 onChange 이벤트를 사용하여 입력 값을 관리하고, onSubmit 이벤트를 사용하여 폼 제출을 처리합니다.
<form onSubmit={handleSubmit}>
<input type="text" onChange={handleChange} />
<button type="submit">제출</button>
</form>
추가적인 고급 기능
- Custom Events: 사용자 정의 이벤트를 생성하여 컴포넌트 간에 커스텀 이벤트를 전달할 수 있습니다.
- Event Composition: 여러 이벤트 핸들러를 조합하여 복잡한 이벤트 처리 로직을 구현할 수 있습니다.
결론
React에서 이벤트 처리를 잘 이해하면 사용자와 상호 작용하는 동적인 웹 애플리케이션을 개발하는 데 큰 도움이 됩니다. 합성 이벤트, JSX, 이벤트 객체, 이벤트 버블링 등의 개념을 숙달하여 효과적인 이벤트 처리를 구현해 보세요.
728x90
'React.js 를 배워보자 > 2. React.js 기본 개념' 카테고리의 다른 글
렌더링 (0) | 2024.10.01 |
---|---|
JSX (JavaScript XML) (0) | 2024.10.01 |
라이프 사이클 메서드 (0) | 2024.10.01 |
props와 state (0) | 2024.10.01 |
React 함수형 컴포넌트와 클래스형 컴포넌트 (0) | 2024.10.01 |