이벤트핸들러2 [ React ] 클래스 컴포넌트와 함수형 컴포넌트의 이벤트 핸들러 비교 이번에는 바인딩이 필요한 클래스 컴포넌트의 이벤트 핸들러를 다루는 방식, 바인딩 없이 클래스 필드 문법을 사용해 클래스 컴포넌트를 사용하는 방식, 현재 널리 쓰이는 함수형 컴포넌트의 이벤트 핸들러를 다루는 방식에 대해서 알아보자. 클래스 컴포넌트의 이벤트 핸들러 클래스 컴포넌트는 이벤트 핸들러를 정의하고 사용할 때, 반드시 bind() 메서드를 사용해야 한다. bind()메서드를 사용해서 이벤트 핸들러와 컴포넌트 인스턴스를 바인딩 해줘야 하는 이유는 클래스 컴포넌트 내부에서 함수가 호출될 때 함수 내부의 this는 컴포넌트 자체를 가리키지 않기 때문이다. 컴포넌트 인스턴스가 아니라 엘리먼트를 가리키게 될 수 있다는 것이다. import React from 'react'; export default cla.. 2023. 8. 28. [ JavaScript ] 이벤트 핸들러를 등록할 때 ()빼고 함수명만 적기 처음에 공부할 떄는 이런 기본적인 부분도 헷갈리곤 한다. btnSend.addEventListner('click', sendLinkToEmail()); btnSend.addEventListner('click', sendLinkToEmail); addEventListner 메서드는 이벤트가 발생했을 때 실행할 함수를 인자로 받는다. 그럼 click 되었을 때 함수가 실행되어야 하니까 ()를 붙여서 sendLinkToEmail()이라고 써줘야 하지 않을까? 하고, ()를 쓰면 즉시 호출되는 건 알지만 인자로 들어가있는데 설마 즉시 호출 되겠어 하고, 그러나 괄호 ()를 추가하게 되면 함수를 즉시 실행시키는 것이 되어버린다. 즉시 호출이 되어버리면 이벤트 핸들러가 등록되자마자 함수가 실행된다. 페이지 로딩과.. 2023. 8. 2. 이전 1 다음