이벤트 처리

이벤트 사용시 주의 사항

1. 이벤트 이름은 카멜 표기법으로 작성 (ex. onclick -> onClick)
2. 이벤트 실항할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
3. DOM 요소에만 이벤트 설정할 수 있다. 즉, 컴포넌트 자체적으로 이벤트 설정이 불가능

 

이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Mouse
• Selection
• Touch
• UI
• Whell
• Media
• Image
• Animation
• Transition

          onChange={e => {
            console.log(e);
          }}

e 객체는 SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 개체다. 네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 떼와 똑같이 사용하면 된다. 이벤트가 끝나고 나면 이벤트가 초기화 된다.

비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist()함수를 호출해야 한다.

 

이벤트에 실행할 함수형태의 값 전달

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
            });
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({
              message: ""
            });
          }}
        >
          확인
        </button>
      </div>
    );
  }
}

export default EventPractice;

 

함수를 미리 전달하여 값을 전달(성능의 차이는 거의 없지만, 가독성의 차이)

import React, { Component } from "react";

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

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

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

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

export default EventPractice;

 

handleChange = e => {
	this.setState({
    	[e.targe.name]: e.target.value
    });
};

위와 같이 객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용딘다.

 

함수형 표현

import React, { useState } from "react";

const EventPractice = () => {
  const [form, setForm] = useState({
    username: "",
    message: ""
  });
  const { username, message } = form;
  const onChange = e => {
    const nextForm = {
      ...form, //기존의 form 내용을 복사한 뒤
      [e.target.name]: e.target.value //원하는 값 덮어 씌우기
    };
    setForm(nextForm);
  };
  const onClick = () => {
    alert(username + ": " + message);
    setForm({
      username: "",
      message: ""
    });
  };
  const onKeyPress = e => {
    if (e.key === "Enter") {
      onClick();
    }
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

export default EventPractice;