728x90
이벤트 핸들러
-
리액트 주요개념 - 이벤트 처리하기IT/리액트 2022. 1. 15. 23:22
React 엘리먼트와 Dom 엘리먼트에서 이벤트를 처리하는 방식은 비슷하지만 문법적인 차이가 존재합니다. React DOM 캐멀 케이스(camelCAse) 사용 소문자 사용 JSX를 사용해 함수로 이벤트 핸들러 전달 문자열로 이벤트 헨들러 전달 예) Activate Lasers 예) ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this.state.isToggleOn ? 'on' : 'off'} ) } } 위의 constructor에서 바인딩해주지 않는다면 handleClick 메서드에서 this가 undefinde인식됩니다. 이렇게 바인딩하는 것은 JavaScript에서 함수가 작동하는 방식의 일부입니다. 일반적으로 onClick={..