Increment를 누르면 Counter에 있는 숫자가 증가한다.
하지만 위 코드대로면 Decrement는 적용이 안 된다.
차이는 함수냐, 화살표 함수냐다.
Decrement를 누르면 다음과 같은 에러가 뜬다.
찾을 수 없다는 얘기다.
코드를 한 번 보자.
호출하는 문구가 this를 사용하고 있으니 this를 출력해보겠다.
화살표 함수 increment는 나와도 decrement는 안 나온다.
콜백함수를 실행할 때 일반적인 함수는 this를 가져가지 않는다.
이건 리액트의 특성이라기보다 js의 특성이다.
그래서 클래스와 콜백함수를 묶어주는(binding)과정이 필요하다. 화살표 함수가 그 과정을 해준다.
위와 같이 bind 구문을 해주면 되는데...저러느니 화살표 함수를 쓰는 게 손가락 건강에 편하겠다.