[React] 이벤트(Event)와 이벤트 핸들러(Event Handler)

1. 이벤트(Event)와 이벤트 핸들러(Event Handler)

• 이벤트(Event)
  - 리액트의 이벤트는 웹 브라우저의 HTML 이벤트와 동일한 기능을 한다.
  - 또한, HTML 이벤트와 인터페이스가 동일하여 사용법 또한 비슷하다.
• 이벤트 핸들러(Event Handler)
  - HTML 또는 자바스크립트에서 이벤트 처리를 위해 사용하는 핸들러와 마찬가지로 리액트에서 이벤트를 사용하기 위해 프로그래밍하는 방법 또는 함수
• event 매개변수
  - 함수 형태로 값을 전달 할 때 함수 매개변수로 event를 받아서 사용할 수 있다.
  - event.target은 이벤트를 발생시키는 태그를 뜻한다.
  - event.target.value는 이벤트를 발생시키는 태그의 value를 뜻한다.
  - 이벤트 예시 2 참조

2. 이벤트 사용시 주의사항

• 이벤트 이름은 카멜 표기법으로 하는 것을 추천
  - 첫글자는 소문자
  - 단어 시작은 대문자
  onclickbutton -> onClickButton
• 이벤트에는 함수 형태의 값을 전달
  onClick = { onClickButton }    // 함수 방식(미리 함수를 정의)
  onClick = { () => count + 1 }   // 인라인 방식
  
  - 함수에서 this를 사용하기 위해서는 arrow 함수 방식 사용
  const onClickButton = () => { count + 1 }
• 일반적으로 한줄에 가능한 간결한 문장은 인라인으로 여러줄 또는 긴 문장은 함수 전달 방식으로 작성

3. 기본적인 이벤트

onClick	버튼/링크 등 태그가 클릭되면 호출되는 이벤트
onChange	입력 태그에서 문자 등의 값이 변경되면 호출되는 이벤트
onKeyPress	화면 또는 박스 등에서 키보드의 키가 눌러지면 호출되는 이벤트
그 외에도 엄청 많음.....

4. 이벤트 예시 1(onClick)

5. 이벤트 예시 2(onChange - select)

- select value를 state로 해 놓았기 때문에 onChange 이벤트가 발생될 때 setState를 통해서 state가 바뀜에 따라 value가 선택한 value로 바뀌게 된 것이다.

6. 이벤트 예시 3(onChange - input(text, checkbox))

- checkbox는 event.target.checked로 체크가 되었는지 아닌지를 확인할 수 있다.

7. 이벤트 예시 3(onChange - input(radio))

- radio는 각 라디오 버튼에 value 값을 줘서 event.target.value를 사용해 값을 받아올 수 있다.

- 그 뿐만 아니라 onChange 이벤트를 인라인 함수로 onChangeRadio를 한번 걸쳐서 호출해서 원하는 값을 얻을 수 있다.