[React] 이벤트

Event

이벤트

합성 이벤트 (SyntheticEvent)

브라우저마다 이벤트 이름부터 시작해서 이벤트 종류나 이벤트가 처리되는 방식이 다릅니다. 이를 동일하게 처리하기 위해 React 는 Synthetic 이벤트로 브라우저마다 다른 Native 이벤트를 묶어서 처리합니다. 따라서 React 개발자는 브라우저마다 다른 Native 이벤트를 신경쓰지 않고, React 가 제공하는 이벤트만 신경쓰면 됩니다.f

React 이벤트는 합성 이벤트라서, false 를 반환하더라도 이벤트 전파가 멈추지 않습니다. 반드시 e.stopPropagation() 또는 e.preventDefault() 를 호출해야 합니다.

이벤트 등록하기

React JSX 에서 이벤트를 등록할 때 조심해야 하는건 일반적인 HTML에서 이벤트를 등록하는 방식으로 등록하면, 등록하는 순간 함수가 실행되버리는 문제가 있습니다. 따라서 아래와 같이 등록해야 합니다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

또는 아래와 같이 등록할 수도 있습니다.

<button onClick={() => activateLasers() }>
  Activate Lasers
</button>

이벤트 변수받기

<button onClick={(e) => activateLasers(e) }>
  Activate Lasers
</button>

Form 에서 이벤트 처리하기

Form 데이터가 변경될 때마다 입력 값이 유효한지 확인하는 경우 아래의 코드를 참고하시면 됩니다.

<form onSubmit={this.handleSubmit}>
  <label>
    Name:
    <input type="text" value={this.state.value} onChange={this.handleChange} />
  </label>
  <input type="submit" value="Submit" />
</form>