1. 리액트에서 DOM 이벤트 다루기

1. JSX로 작성한 엘리먼트에 속성{} 값으로 이벤트 핸들러(함수정의)를 정의한다.

<button onClick={active}></button>

2. 이벤트 표기법: 카멜표기법으로 작성

// Type 1
onClick = {function() { ... } }
          
// Type 2
onClickl = { () => { ... } }

3. 이벤트 핸들러 예시

<button onClick = {(function(event) {
  console.log(this, event)}.bind(this)}>button</button>

• 여기서 event객체는 내장 DOM 이벤트 객체를 개선한 것으로 합성 이벤트이다.
• bind()를 하는 이유는 이벤트 핸들러 함수가 리액트 엘리먼트에 대해 참조를 해야하기 때문이다.

4. bind(this)를 하지 않는 경우 👊

• this를 이용해서 해당 클래스 참조가 필요 없을 때
• React.createClass()를 이용할 때(자동 바인딩이 된다)
• 화살표함수( () => { ... } )를 사용할 때

class LoggingButton extends React.Component { 
  handleClick() {
    console.log("this is:", this);
  }
  render() {
    return (
      <button onClick={()=> this.handleClick()}>Click</button>
      );
   }
}

2. 리액트 이벤트 살펴보기

리액트 이벤트 처리 : JSX에 속성으로 이벤트 선언 (예시 : onClick={handleClick})

1. jQuery나 일반적인 JavaScript에서는 DOM노드에 직접 이벤트 리스너를 연결(addEventListener)
2. 리액트에서는 직접 연결할 시 라이프 사이클에서 이벤트를 추가하거나 제거할 때 문제가 발생

3. 리액트 합성 이벤트 객체

1. 크로싱 브라우징 문제를 해결하기 위해서 리액트는 합성 이벤트를 사용한다.
2. 이벤트 핸들러가 한 번 실행되면 합성 이벤트는 null이 되어 더 이상 사용할 수 없다.
   • 그래서 합성 이벤트를 전역변수에 담거나 콜백 함수에 비동기적으로 사용하려 하겠지만, 기본적으로 이벤트를 비동기 콜백함수나 전역변수에 담아 사용할 수 없다.
   • 이벤트 핸들러를 실행한 후에도 합성 이벤트를 유지하려면 event.persist()메서드를 사용하면 된다.
   • event.persist()메서드를 실행하면 이벤트 객체가 재사용되지 않아 null로 처리가 안된다.

// 합성이벤트 안티패턴
class Mouse extends React.Component {
  handleMouseOver(event) {
    window.e = event //안티패턴 - 이벤트 전역변수에 담을 수 없음
    setTimeout(() => {
      console.table(window.e.target) //안티패턴 - 이벤트 비동기 콜백함수에 담을 수 없음
    }, 2345)
  }
  render() {
    return <div>
      onMouseOver={this.handleMouseOver.bind(this)}
  	</div>
	}
}

4. 이벤트와 상태 사용하기

상태변경이 필요하기 때문에 setState() 메서드를 사용한다.
setState() 메서드를 사용하기 위해서는

1. class 컴포넌트로 구현할 것
2. constructor()에서 초기값(this.state)를 설정할 것

5. 이벤트 핸들러 속성으로 전달

자바스크립트에서 함수는 일급 객체이며, 변수나 속성을 전달할 수 있다.

6. 컴포넌트 간의 데이터 교환

자식 컴포넌트 간의 상호작용이 필요한 경우에는 부모나 컨테이너 컴포넌트에 두는 것이 가장 좋은 방법이다.
하지만, 이벤트가 하나의 자식 컴포넌트에만 영향을 끼친다면, 상위 컴포넌트를 이벤트 처리 메서드로 어지럽힐 필요가 없다.

7. 리액트가 지원하지 않은 DOM 이벤트 처리

리액트 컴포넌트의 라이프사이클 이벤트를 사용한다.
componentDidMount()에서 이벤트 리스너를 추가하고 componentWillUnmount()에서 컴포넌트가 DOM에서 제거될 때 이벤트도 같이 제거한다.