[React] 6. 이벤트 처리하기

출처: React 공식 홈페이지

이벤트 처리하기 – React (reactjs.org)

 

 

1. React 이벤트 문법

(1) camelCase 사용

(2) 함수로 이벤트 핸들러 전달

 

예시)

**HTML

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

**React

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

 

2. 기본 이벤트 동작 방지

**HTML 기본 이벤트동작 방지 - return false 사용

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

 

**React 기본 이벤트동작 방지 - preventDefault 메서드 사용

> e는 합성이벤트로 그대로 사용하면 된다. 신경쓸 필요 없다.(라고 함)

fuction ActionLink(){
  function handleClick(e){
    e.preventDefault();
    console.log('The link was clicked.');
  }
	
  return(
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

 

 

3.  클릭이벤트 추가는 addEventListener 대신, 처음 렌더링될 때 리스터를 제공한다.

예시) ON, OFF 전환 버튼 - handleClick()이 이벤트 리스너 역할

        constructor에 this.handleClick = thishandleClick.bind(this); 가 있음에 유의

class Toggle extends React.Component{
  constructor(props){
    super(props);
    this.state = {isToggleOn: true};
		
    this.handleClick = this.handleClick.bind(this);
  }
	
  handleClick(){
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
	
  render(){
    return(
      <button onClick={this.handleClick}>
        {this.state.isToggleOn? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

 

 

4. constructor 안에 this.handleClick = thishandleClick.bind(this); 

> handleClick내부에서 this가 handClick이 아닌 Toggle class를 의미하게 된다는 문장이다.

   즉, 바인딩을 하지 않으면 나중에 호출했을 때 this 가 undefined가 된다.

   바인딩을 하지 않으려면

 

방법1

// 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
// 주의: 이 문법은 *실험적인* 문법입니다.
handleClick = () => {
	this.setState(state => ({
		isToggleOn: !state.isToggleOn
	}));
}

 

방법2

render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
}

하지만 방법2에 문제점이 있다고한다. 이것은 공식홈페이지서 보면될거같다.. ㅎㅎ 아무튼 지양하는 쪽으로
생성자 안에서 바인딩(기존)하거나 클래스 필드 문법(방법1)을 사용하는 것을 권장한다고 한다.
방법1도 실험적인 문법이라니 기존 문법인 '바인딩'을 해주는 편이 나을것 같다.

 

 

5. 이벤트 핸들러에서 인자 전달은 아래 방법들로 가능.

 

방법1

<button id="A" onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

 

방법2

<button id="B" onClick={this.deleteRow.bind(this, id)}>Delete Row</button>