React Event 처리하기 / React 이벤트 처리하기

※ React에서 Event 처리하는 방법

• React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

- javascript와 React에서의 함수 이벤트 적용 방법 차이점.

 1. 함수 이벤트 적용 방법

아래는 javascript에서의 함수 이벤트 적용 방법입니다.

// javascript
<button onclick="activateLasers()">
  Activate Lasers
</button>

아래는 React에서의 함수 이벤트 적용 방법입니다.

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

 

 2. 이벤트를 막는 방법

* javascript에서는 return false;를 하면 이벤트를 막을 수 있지만, React에서는 적용되지 않습니다.

다른 방법으로 preventDefault;를 명시적으로 호출해야 합니다.

// javascript
<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

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

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

---

※ JSX내에서 이벤트 처리 시 주의사항이 있습니다. 주의 사항은 아래 글에서 확인 가능합니다.

https://tadaiswhatever.tistory.com/20

---

※ 인자 전달하는 방법

// 첫번째 방법
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// 두번째 방법
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

 

이전 글 : 2021.11.06 - [UI/React] - React 생명주기 / React 클래스 컴포넌트 생명주기2 (Update & Unmount)

React 생명주기 / React 클래스 컴포넌트 생명주기2 (Update & Unmount)

다음 글 : 2021.11.08 - [UI/React] - React Event 처리 시 주의사항 / React 이벤트 처리 시 주의사항

React Event 처리 시 주의사항 / React 이벤트 처리 시 주의사항