this를 공부해야겠다는 마음을 먹었더니 한 친구가 this mdn번역글을 주엇다

그 중 하나인 인스턴스 메서드에서의 바인딩이 인상깊었다.




두 번째 사진에서

이 패턴은 특히 컴포넌트(React 또는 Web Components)에서 인스턴스 메서드를 Event Listener로 이용하고자 할 때 매우 유용하다.

라는 걸 보고,

저번에 클래스를 만들고 이벤트 리스너를 달기 위해 bind하고 개 난리를 피웠다는게 생각낫다.


암튼 그래서 움... 어떤 의미일까~ 하고 구글에 돌아다니는 코드를 쓰윽 복사해서 어떤 식으로 작동하는지 한번 돌려봤다.



1. 클래스 필드 this 바인딩하기!



보통 인스턴스 객체를 클래스 필드와 연결하기 위해 bind로 바인딩을 해준다(너무 옛날에 본거라 이치에 맞는 말인지 몰겟슴)

암튼 저렇게 하면


저렇게 에러없이 잘 나오는걸 확인할 수 있다.

그러면 위의 글처럼 클래스필드를 애로우 펑션으로 작성해보면 잘 될까?



2. 클래스 필드를 애로우 펑션으로 작성



결과는

두구두두구두두구ㅜ둗구구



앞 결과처럼 잘 된다 :)

오오 신기하다 싶어서 한번 클래스필드를 그냥 메소드..?로 만들어보고 메소드를 인스턴스와 바인딩하지 않았을때는 어떻게 되나 한번 해봤다



3. 클래스필드 + 바인딩x



결과는......


허거거걱!!!!!!!

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

at HTMLDocument.onKeyDown (index.html:59:26)

에러가 떳다!!!!! 배열에 정상적으로 요소가 push되지 않아따라고 한다!!!!!!

그런데 좀 신기한게 위에 1) 눌러진 키랑 2) this에 대해서는 잘 나오는데..? 왜 저렇게 결과가 나오는건지 좀 의문스럽다


암튼 진자루 싱기하구 그랫다

솔직히....... 나는 아직 this가 너무 어렵기도 하고.. this바인딩 하는것도 좀 부담스럽고 그래서 클래스가 좀 부담스러웠는데?
저걸 보고 움~~~ 저렇게 클래스필드를 애로우펑션으로 작성하면 this부담도 없다는게 좋은것 갓따. 나중에 리액트할때두 부담이 업을거같따


이전에 어떤 FE께서 "애로우 펑션은 그냥 핸들러 때만 사용하고 보통은 그냥 기명함수 쓰지" 어쩌고..? 그랬던거 같은데,

그땐 저게 무슨 말인걸까 했는데, 이걸 말하는게 아닐까 추측해본다


저거 연습할겸 한번 키 이벤트를 이용해서 클래스로 뭔가 토이플젝을 해볼까 한다(물론 클래스 부담스럽긴 한데 그래도 저것도 자유자재로 다뤄야 하니까..)

아이디어 있으면 부탁합니다 헤헷