라이브로 다같이 무작정 따라하기를 간만에 하다가, 리액트 초보자 자습서에서 애로우펑션을 쓰면 "타이핑 횟수를 줄이고 this의 혼란스러운 동작을 피하기 위해서 아래부터는 이벤트 핸들러에 화살표 함수를 사용하겠습니다."
라고 되어있는 부분이 있다. 곱씹어보니 리액트에서? 음... JS에서? 일반적인 this와 다를까? 하고 잘 모르던 부분이라 내가 생각하던 그 결과가 안나오고 다른게 나올거라 생각했는데 이 또한 틀렸었다.
그냥 일반적인 호출
애로우 펑션으로 호출
일반 메서드 생성하지만 끝에 현재 this 위치를 명시적으로 바인딩 후 호출.
--------
아... window 가 나올 줄 알았는데... 찾아보니 Javascript 클래스 인스턴스에서 this 써야하는 메서드는 기본적으로는 this를 바인딩 해두지 않기 때문에 못찾는거라고...😰 아...
그렇다고 리액트만의 특별한 스코프가 있는것도 아니었다.
그냥... 일반적인것이었다.
참고자료
mdn bind : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Function.prototype.bind() - JavaScript | MDN
Function.prototype.bind() bind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다. The sour
developer.mozilla.org
리액트 이벤트 처리 : ko.reactjs.org/docs/handling-events.html
이벤트 처리하기 – React
A JavaScript library for building user interfaces
ko.reactjs.org