EVENT2 [React] 이벤트 처리하기_2 Event Propagation in React 리액트의 이벤트는 DOM을 타고 전파되는 특성이 있다. function Toolbar() { return ( { alert('You clicked on the toolbar!'); }}> alert('Playing!')}> Play Movie alert('Uploading!')}> Upload Image ); } 위와 같이 button 태그를 감싼 div 태그에 이벤트가 부착되어 있을 때 button 태그를 클릭할 경우 div 태그의 이벤트도 같이 실행된다. 이를 이벤트 전파 또는 이벤트 버블링이라 한다. (onScroll 이벤트는 해당 태그에서만 실행된다. 이를 제외한 모든 이벤트는 전파된다.) 이벤트 전파를 막기 위해서는 이벤트 전파가 일어나지 않아야 .. 2023. 5. 8. [React] 이벤트 처리하기_1 Event Handler in React 리액트는 jsx에 이벤트 핸들러를 등록할 수 있게 해 준다. 이벤트 핸들러는 클릭이나 마우스오버, 값 입력 등에 대해 반응할 수 있게 만드는 함수이다. //button 태그에 alert 이벤트를 등록해주는 함수 handleClick export default function Button() { function handleClick() { alert('You clicked me!'); } return ( Click me ); } 일반적으로 컴포넌트 내부에서 정의해서 사용하며 이름을 handle로 시작하는 단어로 정하는 것이 컨벤션에 더 적합하다. 아래와 같이 jsx 내부에서 인라인 방식으로 이벤트 핸들러를 정의할 수도 있다. //화살표 함수 사용 { alert('Y.. 2023. 4. 24. 이전 1 다음