리액트를 다루는 기술-4 (이벤트 핸들링)

리액트의 이벤트 시스템

• html에서 제공하는 이벤트 시스템과 유사함
• 주의 사항
  • 카멜표기법 : onClick
  • 함수형태로 전달
  • DOM 요소에만 설정할 수 있음 (컴포넌트에 대해서는 설정 할 수 없음

---

클래스 컴포넌트

• 웹 브라우저의 네이티브 이벤트를 감싸는 객체이기 때문에 네이티브 이벤트와 똑같이 사용하면 됨
• 여러개의 state를 유지하고 이벤트로 업데이트 해야할 때
  • name과 같은 tag attribute 를 state와 같은 key 값으로 지정하여 사용 할 수 있음

  handleChange = (e) => {
  	this.setState({[e.target.name] : e.target.value})
  }
  

• 이벤트 리스너를 arrow function 로 사용함→ 기존의 함수 형태로 사용하면 this binding을 새로 해주어야 함
• → arrow function의 this는 생성된 곳의 this로 고정이됨 ( 별도의 this를 가지지 않기 떄문)
• → this binding 때문

---

함수 컴포넌트

• 상태를 각자 생성, 리스너 함수도 각자 생성
• 컴포넌트에서 이벤트로 인해 변경되어야 할 상태를 하나의 객채 형태로 생성, 리스너 함수는 위의 형식으로 생성