event

event

사용자가 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 한다. 예를 들어 onClick과 같은 메서드를 일컫는다.

 

event 주의사항

1. 이벤트 이름은 카멜 표기법(onclick -> onClick, onkeyup -> onKeyUp)

 

2. 이벤트에 JS 코드가 아닌 함수 형태의 값을 전달

 

3. DOM 요소에만 이벤트를 설정할 수 있음

우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 예를 들어 MyComponent에 onClick 값을 설정한다면 클릭할 때 doSomeThing 함수를 실행하는 것이 아니라 그냥 이름이 onClick인 props를 MyComponent에 전달해 줄 뿐이다.

 

event handling

이벤트 처리는 다음과 같이 구현한다.

이벤트에 코드가 아닌 함수 형태의 값을 전달 해야한다. 그래서 임의 메서드로 함수를 미리 준비해 전달하는 방식이 있다.

input이 여러 개 라면 핸들러를 여러 개로 만들지 말고 event 객체를 잘 활용하자