[공식 문서]이벤트 처리하기

- React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.

  ※ 캐멀케이스 : 낙타의 모양에서 따온 방법이다. 첫번쨰는 소문자로 시작하고 두번쨰 단어부터 대문자로 시작한다.

                       단어와 단어 사이는 붙인다.

 

- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

 

ex)

<button onClick={activateLasers}>

   Activate Lasers

</button>

 

- React에서는 false를 반환해도 기본 동작을 방지 할 수 없으므로 반드시 preventDefault를 명시적으로 호출해야한다.

function Form() {

   function handleSubmit(e) {

        e.preventDefault();

        console.log('You clicked submit.');

}

 

return (

   <form onSubmit={handleSubmit}>

      <button type="submit">Submit</button>

   </form>

);

}

 

위에서 e 는 합성이벤트 이다.

 

※ 합성이벤트란?

브라우저마다 이벤트 이름부터 처리되는 방식이 다르므로 이를 동일하게 처리하기 위해 React는 이를 Synthetic 이벤트로 묶어서 처리한다. 

React는 합성 이벤트라서 false를 반환하더라도 이벤트 전파가 멈추지 않으므로 e.preventDefault() 를 호출해줘야한다.

 

* 이벤트 등륵방법

<button onClick={activateLasers}> 

    Activate Lasers

</button>

또는 

 

<button onClick={() => activateLasers() }>

    Activate Lasers

</button>

* 이벤트 변수받기

<button onClick={(e) => activateLasers(e) }>

   Activate Lasers

</button>

* Form 에서 이벤트 처리하기

<form onSubmit={this.handleSubmit}> 

    <label>

      Name:

      <input type="text" value={this.state.value} onChange={this.handleChange} />

    </label>

     <input type="submit" value="Submit" />

</form>