바인딩
Binding이란 React에서 컴포넌트에 이벤트 메서드를 연결하는 방법입니다.
React에서 Binding이 필요한 경우가 많이 필요합니다.
바인딩을 하지 않아도 이벤트 함수는 실행이 되지만 , 어떤 컴포넌트가 호출했는지 알 수 없습니다.
바인딩을 하지 않고 이벤트 함수를 실행할 경우 this.state 혹은 this.props는 undefined로 처리됩니다.
바인딩을 하지 않았을 경우
위와 같은 코드를 보면 + button을 눌렀을 경우 handleIncrease 메서드가 실행되어 this.state의 number값이 + 1 증가할 것이라고 예상 할 수 있다.
반대로 - button을 눌렀을 경우 handleDecrease 메서드가 실행되어 this.state의 number값이 - 1 감소될 것이라고 예상 할 수 있다.
결과
예상했던 결과와 다르게 버튼을 클릭할 경우 setState가 undefined라 읽을 수 없다고 에러가 나옵니다.
console.log( this )를 해보았을때 undefined라고 출력된것을 보면 변수가 아예 존재하지 않는다는것을 알 수 있습니다.
이벤트 함수에서 this를 사용해야 할 경우 생성자( constructor )에서 bind 하거나 Arrow function을 사용해야 합니다.
생성자(constructor)에서 바인딩 ( 내장 메서드 bind() )
위와 같이 생성자( Constructor )에서 this를 사용하여 이벤트 함수에서 this를 접근할 수 있게 합니다.
하지만 이렇게 생성자( Constructor )에서 바인딩을 할 때 이벤트 함수가 많을경우 코드가 길어지는 문제가 있습니다.
결과
+-버튼을 누르면 정상적으로 값이 + 1 , -1 됩니다.
화살표 함수 사용방법 1
위와 같이 이벤트 함수를 Arrow function으로 만들어 바인딩이 되지 않는 this 문제를 해결할 수 있습니다.
화살표 함수 사용방법 2
화살표 함수 사용방법 3
