React 19 Tutorial - 15 - Event Handling
- React 컴포넌트를 사용자 상호작용에 반응하도록 만드는 방법입니다. 👆
- 이벤트 핸들링은 함수 정의 후
on으로 시작하는 특별한 prop에 할당하는 두 단계로 이루어집니다. ⚙️
- 이벤트 prop은
onClick처럼 on으로 시작하며 카멜 케이스를 사용해야 합니다. 🔡
- 이벤트 핸들러 함수는 일반적으로
handleClick과 같이 handle 접두사를 붙여 명명합니다. 🏷️
- 간단한 로직은 인라인 함수로, 복잡한 로직은 별도의 함수로 정의하는 것이 가독성과 테스트 용이성 면에서 좋습니다. ↔️
- 가장 중요: 이벤트 핸들러를 할당할 때는 함수 자체를 전달해야 하며,
handleClick()처럼 괄호를 사용하여 즉시 호출하지 않도록 주의해야 합니다. ⚠️
- React는
onChange, onSubmit, onMouseEnter 등 일반 JavaScript의 모든 표준 이벤트를 지원합니다. 🌐
- 모든 이벤트 핸들러는
event 객체를 첫 번째 매개변수로 받아 event.target, event.clientX 등 이벤트에 대한 유용한 정보를 얻을 수 있습니다. 🔍
- 이벤트 핸들러는 컴포넌트 내부에 정의되므로 해당 컴포넌트의 모든 변수와 prop에 접근할 수 있습니다. 🔑
데브허브 | DEVHUB | React 19 Tutorial - 15 - Event Handling