Event Handling

이벤트를 사용할 때 주의 사항

<aside> 🔥 이벤트 이름은 카멜 표기법으로 작성하기

onclick → onClick

onkeyup → onKeyUp

</aside>

<aside> 🔥 이벤트에 실행할 자바스크립트 코드를 전달하는게 아니라 함수 형태 값 전달

</aside>

**import React, { useState } from "react";

function Say(props) {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("안녕하세요");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={() => setMessage("안녕히 가세요")}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
}

export default Say;**

지원하는 이벤트

<aside> 🔥 리액트에서 지원하는 이벤트

<aside> 🔥 클래스형 컴포넌트에서 state에 input값 담기

이벤트핸들링에 setState로 할 수 있다.

</aside>

import React, { Component } from "react";

class EventPractice extends Component {
  state = {
    message: "",
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

<aside> 🔥 가독성과 성능적인 측면에서 함수를 따로 분리해서 호출하는게 좋다.

함수가 호출될 때 this가 호출부에 따라 결정되기 때문에 이벤트로 등록되는 과정에서

메서드와 this의 관계가 끊어져 버린다.

따라서 메소드를 this와 바인딩하는 작업이 필요하다.

</aside>

import React, { Component } from "react";

class EventPractice extends Component {
  state = {
    message: "",
  };

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(e) {
    this.setState({
      message: e.target.value,
    });
  }

  handleClick() {
    alert(this.state.message);
    this.setState({
      message: "",
    });
  }

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

<aside> 🔥 메서드 바인딩은 생성자 메소드에서 하는 것이 정석이지만,

더 편리한 방법으로 화살표 함수 형태로 메소드를 정의할 수 있다.

</aside>

import React, { Component } from "react";

class EventPractice extends Component {
  state = {
    message: "",
  };

  handleChange = (e) => {
    this.setState({
      message: e.target.value,
    });
  };

  handleClick = () => {
    alert(this.state.message);
    this.setState({
      message: "",
    });
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

input값 여러개 다루기