React 이벤트 처리하기

인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.

---

컴포넌트에는 여러 이벤트가 발생 → 이벤트에 대한 처리를 커스텀

웹브라우저의 HTML이벤트를 기본적으로 지원

• 이벤트 핸들러 속성명은 camelCase로만 작성 (HTML에서는 onclick, 리액트는 onClick)
• 이벤트 핸들러에는 필히 함수를 지정 (HTML에서는 문자열로 코드를 지정)

HTML

<div onclick="console.log('hello')"></div>

React

<div onClick="{console.log('hello')}"> </div>

DOM 요소에만 이벤트가 지원됨

• 커스텀 리액트 컴포넌트에서는 HTML 이벤트를 지원하지 않음
  • html의 기본태그, <div>나 <p> 등에는 onClick과 같은 함수가 내장되어 있지만, 직접 만든 컴포넌트 (ex. Counter.js)의 경우에는 지원되지 않음
    • 하지만 내부 Element에 DOM 요소를 담아, 핸들러를 지정할 수 있음

Arrow Function 사용

• 상탯값 접근/변경 등을 위해 this로 접근해야 하기 때문에
  • function 문법을 사용하면, this의 scope이 function 내부로 바뀌어버림