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 이벤트는 해당 태그에서만 실행된다. 이를 .. 2025. 12. 25. [React] 이벤트 처리하기_1 Event Handler in React리액트는 jsx에 이벤트 핸들러를 등록할 수 있게 해 준다. 이벤트 핸들러는 클릭이나 마우스오버, 값 입력 등에 대해 반응할 수 있게 만드는 함수이다. //button 태그에 alert 이벤트를 등록해주는 함수 handleClickexport default function Button() { function handleClick() { alert('You clicked me!'); } return ( Click me );}일반적으로 컴포넌트 내부에서 정의해서 사용하며 이름을 handle로 시작하는 단어로 정하는 것이 컨벤션에 더 적합하다. 아래와 같이 jsx 내부에서 인라인 방식으로 이벤트 핸들러를 정의할 수도 있다.//화살표 .. 2023. 4. 24. 이전 1 다음