React 동빈나 강좌 #3

event 처리

React에서는 event handling에 있어서 JS와 매우 흡사하다. 크게 다른 부분은 Camel case를 쓴다는 것.

예제코드 1

예제코드 2

state를 이용한 경우에는 binding 처리까지 해주어야 한다.

Button을 누르면 ON / OFF 로 바뀌는 예제. 그러나 위의 코드로는 event 처리가 정상적으로 일어나지 않는다.

왜냐하면 JS는 binding처리가 자동적으로 제공되지 않는 언어이기 때문

해결방법 1

handClick(){ ~ }  ---> handClick = () =>{ ~ }

해결방법 2

초기화하는 단계 ( Constructor ) 에서 binding 처리를 하겠다고 명시하는 방법

코드

class EventHandling extends Component{
  constructor(props){
    super(props)
    this.state={
      isToggleOn:true
    }
    this.handClick = this.handClick.bind(this)
  }
  handClick = ()=>{
    this.setState(state=>({
      isToggleOn: !this.state.isToggleOn
    }))
  }
  render(){
    return(
      <button onClick={this.handClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
    )
  }
}

ReactDOM.render(<EventHandling/>,document.getElementById('root'))