Handling Events

Handling Events

React의 이벤트 처리는 HTML에서의 처리와 유사하지만 다음과 같은 차이가 존재한다.

• React의 이벤트 타입은 카멜케이스(camel-case) 형태를 사용한다.

  • onclick이 아니라 onClick으로 사용한다.

  • oninput이 아니라 onInput으로 사용한다.

  • 그 외 다른 이벤트도 동일하게 처리한다.

• JSX의 문법을 사용하면 문자열이 아닌 함수를 설정해야 한다.

  • HTML inline script 방식

    • <buttononclick="testHandler();">click</button>

  • JSX 방식

    • <buttononClick={testHandler}>click</button>

이벤트 종류에 따른 처리 방법과 코드에 대해서는 하위 문서에서 다룬다.