리액트 기초/이벤트

이벤트 사용시 주의사항!

엘리먼트에 직접 이벤트를 넣을 때 주의사항! 만약 이벤트가 발생했을 때 실행되는 함수에 ()를 붙이면 무한루프에 빠진다. ()는 함수를 호출하기 때문에 ()를 붙이면 요소가 렌더링됨과 동시에 함수 호출이 일어나서 무한으로 렌더링이 일어난다. onClick={add_count()} 아래처럼 ()를 떼어서 함수를 참조하거나 onClick={add_count} 단순히 이벤트가 발생했을 때 실행되는 함수를 선언해서 해결할 수 있다. onClick={()=>{add_count()}}

Event Listener

이벤트 리스너? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는지 아닌지 지켜보다 알려주는 것이다. 대표적으로 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 쓰인다. 여기를 클릭해서 이벤트 리스너가 무엇이 있는지 확인해보자! 처럼 엘리먼트에 직접 이벤트를 넣어줄 수도 있지만, 컴포넌트가 Mount된 후에 addEventListener 를 통해서 추가할 수도 있다. 주의사항! React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분이 되지 않기 때문에 에러가 난다. useEffect를 이용해서 최초 로드 시에 이벤트를 추가해주면 이벤트 감지가 시작되어 에러를 일으키지 않는다. addEventListener를..