Event Handling

JavaScript에서 우리는 addEventListner라는 이벤트 핸들러를 사용하였습니다. React에서는 어떠한 방식으로 기능을 구현할 수 있는지 살펴봅시다.

Event Handling

1. 개념

HTML DOM에 클릭을 하면, 이벤트가 발생하고 이에 맞는 변경을 일으키는 것이 Event Handling 입니다.JSX에 이벤트를 설정할 수 있습니다. 물론, 클릭 이벤트에만 한정되는 것이 아니라 더블 클릭 혹은 hover 등 여러 이벤트를 핸들링할 수 있습니다.

2. 문법

먼저, camelCase로만 사용이 가능합니다. onClick, onMouseEnter와 같은 예를 들 수 있습니다.

그리고 이벤트에 연결된 JavaScript 코드는 함수입니다. 이벤트={함수}와 같이 사용할 수 있습니다.

마지막으로 실제 DOM 요소에만 사용이 가능합니다. 리액트 컴포넌트에 사용할 시, props에만 전달하게 됩니다.

3. 함수 컴포넌트

그렇다면, 실제로 코드의 예시를 들어보도록 하겠습니다. 먼저 함수 컴포넌트를 사용한 코드입니다.

function Component() {
  return (
    <div>
      <button
        onClick={() => {
          console.log("clicked");
        }}
      >
        클릭
      </button>
    </div>
  );
}

ReactDOM.render(<Component />, document.querySelector("#root"));

4. 클래스 컴포넌트

이번에는 클래스 컴포넌트로 이벤트 핸들러를 만든 코드입니다.

class Component extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button
          onClick={() => {
            console.log("clicked");
            this.setState((state) => ({ ...state, count: state.count + 1 }));
          }}
        >
          클릭
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Component />, document.querySelector("#root"));

클릭을 하게 되면 콘솔창에 clicked가 나타나는 동시에 state 값인 숫자가 0부터 클릭할 때마다 1씩 증가하는 코드를 위와 같이 구현할 수 있습니다.

5. 메소드

이번에는 onClick에 코딩을 해줬던 내용을 별도의 메소드로 작업할 수 있는 방법에 대해 알아봅시다.

class Component extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
    );
  }

  click = () => {
    console.log("clicked");
    this.setState((state) => ({ ...state, count: state.count + 1 }));
  };
}

이처럼 클래스 컴포넌트 안에서 별도의 click이라는 메소드로 분리하여 Event Handling을 가능하게 할 수도 있습니다.