[React] 리액트 기초 배우기 #5 이벤트 처리하기

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서  작성한 글입니다. 
원문 : https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

리액트의 이벤트 문법

- 소문자가 아닌 카멜케이스로 작성합니다.

onClick={activatelasers} (x)

onClick={activateLasers} (o)

 

- 문자열이아닌 함수로 전달합니다.

onClick="함수이름()" (x) 

onClick={함수이름} (o)

 

기존 HTML

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

React

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

 

이벤트 기본 동작 방지

<a href="#" onClick={handleClick}>
	Click me
</a>

<a>태그의 onClick에는 href로 페이지를 이동하라는 기본 동작이 있습니다.

이를 동작하지 않게 하고 onClick에 넘겨준 것만 실행되게 하기 위해선 preventDefault를 이용합니다.

  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

event를 인자로 받고, e.preventDefault()를 호출하면, 이벤트의 기본동작은 동작하지 않게 되고 console.log만 수행됩니다.

 

이벤트에서의 this

기본적으로 onClick등으로 전달한 이벤트에서 this를 호출한 경우 바인딩 되어있지 않기 때문에 undefined로 표시됩니다.

따라서 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해주어야 합니다.

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

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    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')
);

button의 onClick에서 this를 사용하고 있기 때문에(this.setState) constructor에서 바인딩 하는 것을 볼 수 있습니다.

 

이벤트 함수에 인자 전달하기

    onClickHandler(msg) {
        console.log(msg)
    }

이러한 onClick 이벤트 함수가 있고,

<button onClick={this.onClickHandler("BLA")}>Click!</button>

버튼의 onClick에 이렇게 전달했다면, 버튼이 클릭될 때 console.log가 수행되는 것이 아닌 화면이 렌더링 될 때 console.log가 수행된다.

앞서 보았다싶이 onClick에는 "함수이름()"이 아닌 "함수이름"으로 전달받기 때문에 저렇게 전달하면 onClickHandler를 수행한 뒤 retrun값을 onClick에 전달하게 될 것이다.

    onClickHandler(msg) {
        console.log(msg)
        return () => {
            console.log("리턴값이 전달된다.")
        }
    }

실제로 함수의 return값을 위처럼 함수로 전달하는 경우 버튼을 눌렀을 때 return 한 함수가 작동하는 것을 볼 수 있다.

 

따라서 이벤트 함수에 인자를 전달하는 방법은 두가지가 있다.

첫번째는 화살표함수를 사용하는 방식이다. 

<button onClick={() => this.onClickHandler("BLA")}>Click!</button>

두번째는 bind()를 사용하는 방식이다.

<button onClick={this.onClickHandler.bind(this,"BLA")}>Click!</button>