[React] React 시작하기(4) - 이벤트 처리

이벤트란?

웹 페이지에서 마우스를 클릭하거나 특정 요소에 포커스가 이동 되었거나 키를 입력했을 때 등 '어떠한 사건을 발생 시키는 것' 을 의미한다.

 

1. 마우스 이벤트

- click

- dbclick(double click)

- mouseover, mouseoust

- mousedown, mouseup

 

2. 키 이벤트

- keydown, keyup

- keypress

 

3. 폼 이벤트

- focus

- submit

 

등등 그 이상 참고는 https://ko.javascript.info/introduction-browser-events  여길 하시라!

여기 문서 너무 깔끔하고 보기 좋아서 강추... 🤓

 

이벤트 핸들러란?

사용자가 이벤트를 발생시켰을 때, 이에 대응하는 이벤트를 발생시키기 위한 함수이다.

이러한 함수를 핸들러(handler)라고 한다.

사용자의 행동에 어떻게 반응해야 좋을지 js코드로 정의한 것이라고 볼 수 있다!

 

기본 문법 ( DOM 엘리먼트와의 문법 차이)

React 에서 이벤트는 캐멀 케이스(camelCase)를 사용한다.

JSX 를 사용해 함수로 이벤트 핸들러를 전달한다.

<button onClick={함수}>
  클릭하기
</button>

 

React 에서는 false 를 반환해도 기본 동작을 방지 할 수 없다. 

 - 링크 클릭시 해당 URL 로 이동

 - 폼 전송 버튼 클릭시 서버에 폼 전송

 - 마우스 버튼 누른채 글자 위에서 커서를 움직일시 글자 선택

 

preventDefault 는 항상 명시적으로 호출해야한다.

function Form(){
  function handleSubmit(e){
  e.preventDefault();
  	console.log('clicked submit!!');
  }

  return (
    <form onsubmit={handleSubmit} >
      <button type="submit">submit</button>
    </form>
  )
}

React 를 사용할 땐 리스너를 추가하기 위한 addEventListener 호출은 필요없다.

엘리먼트가 처음 랜더링 될때 리스너를 제공한다.

 

이벤트 핸들러 할당 방식

HTML 속성 - on<event>

예시)

<input value="클릭해달라." onClick="alert('클릭했습니다.')" type="button" />

onClick 속성에 click 이벤트 핸들러가 할당 된것이다.

이때 핸들러(함수)의 코드가 길어지면 유지보수도 안좋을 뿐더러 보기도 안좋기 때문에

JS 함수로 따로 선언한뒤 호출하는 방식을 사용해야한다.