리액트 주요개념 - 이벤트 처리하기

React 엘리먼트와 Dom 엘리먼트에서 이벤트를 처리하는 방식은 비슷하지만 문법적인 차이가 존재합니다.

React	DOM
캐멀 케이스(camelCAse) 사용	소문자 사용
JSX를 사용해 함수로 이벤트 핸들러 전달	문자열로 이벤트 헨들러 전달
예) <button onClick="activateLasers">   Activate Lasers </button>	예) <button onclick="activateLasers()"?   ActivateLasers </button>

또 다른 차이점: React에서는 false를 반환해도 기본 동작을 방지할 수 없다! 따라서 반드시 preventDefault를 명시적으로 호출해야 합니다.

<form onsubmit="console.log('you clicke submit.'); return false">
  <button type="submit">Submin</button>
</form>

위의 코드를 실행하면 폼을 제출 후 기본동작인 새로고침을 방지합니다. 이러한 코드를 React에서는 다음과 같이 작성할 수 있습니다.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();  //기본동작(새로고침) 방지
    console.log('you clicke submit.');
  }

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

 

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요없이 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.

ES6 클래스를 사용하여 컴포넌트를 저의할 때 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것입니다.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    this.handleClick = this.handleClick.bind(this); //콜백에서 this가 작동할 수 있도록 바인딩
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'on' : 'off'}
      </button>
    )
  }
}

위의 constructor에서 바인딩해주지 않는다면 handleClick 메서드에서 this가 undefinde인식됩니다.

이렇게 바인딩하는 것은 JavaScript에서 함수가 작동하는 방식의 일부입니다. 일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 같이 바인딩해야 합니다.

 

bind를 호출하지 않는 방법은 두 가지가 있습니다.

1. 클래스 필드 사용

   //클래스 필드 사용
   //this가 handleClick 내에서 바인딩됨
   handleClick = () => {
     this.setState(prevState => ({
       isToggleOn: !prevState.isToggleOn
     }));
   }​

2. 콜백에 화살표 함수 사용

   render() {
     return (
       // 콜백에 화살표 함수 사용
       // htis가 handleClick 내에서 바인딩됨
       <button onClick={() => this.handleClick()}>
         {this.state.isToggleOn ? 'on' : 'off'}
       </button>
     )
   }​

2번 문법의 문제점은 Toggle이 렌더링될 때마다 다른 콜백이 생성된다는 것입니다. 대부분의 경우 문제가 되지 않지만 콜백이 하위 컴포넌트에 props로 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있습니다. 따라서 생성자 안에서 바인딩을 하거나 클래스 필드 문법을 사용하는 것이 권장됩니다.

 

 

이벤트 핸들러에 인자 전달하기

이벤트 핸들러에 인자른 전달하는 방식은 화살표 함수를 사용하는 것과 bind 사용하는 것이 있습니다.

화살표 함수를 사용하면 괄호 내에 React 이벤트를 나타내는 e 인자를 명시적으로 전달해야 하지만 bind는 e가 자동적으로 전달됩니다.

//선택한 행을 삭제하는 코드

// 화살표함수: e 명시적 전달
<button onclick={(e) => this.deleteRow(id, e)}>DeleteRow</button>

// bind: e 자동 전달
<button onclick={this.deleteRow.bind(this,id)}>DeleteRow</button>