[React]이벤트 핸들링

이벤트 사용 시 주의사항

* 카멜 표기법 사용

   onclick -> onClick

   onkypup -> onKeyUp

* 이벤트에는 함수 형태의 값을 전달

  onClick={() => console.log('click!')}

* DOM요소에만 이벤트 설정

  div, button, input등에는 이벤트를 설정할 수 있지만 컴포넌트에는 이벤트를 설정할 수 없음.
  <MyComponent onClick={} />이면 MyComponent에 Onclick이라는 props를 전달하는 것.

---

1. 클래스형 컴포넌트에서 임시 메서드 사용

import React, { Component } from "react";
 
class EventSample extends Component {
  /*
  constructor(props) {
    super(props);
 
    //this가 컴포넌트 자신을 제대로 가리키기 위해 메서드를 this와 바인딩
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }*/
 
  state = {
    username: "",
    message: "",
  };
 
  //임의 메서드 생성
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };
 
  handleClick = () => {
    //button클릭 시 input의 내용을 띄워준 후 초기화
    alert(this.state.username + ": " + this.state.message);
    this.setState({
      username: "",
      message: "",
    });
  };
 
  handleKeyPress = (e) => {
    //input에서 ender입력 시 button onClick과 같은 메서드 호출
    if (e.key === "Enter") {
      this.handleClick();
    }
  };
 
  render() {
    return (
      <div>
                <h1>이벤트 연습</h1>
        <input
          type="text"
          name="username"
          placeholder="유저명"
          onChange={(e) => {
            //메서드 없이 이벤트 함수 바로 적용
            console.log(e.target.value);
          }}
        />
                
        <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}
          onKeyPress={this.handleKeyPress}
        />
                <button onClick={this.handleClick}>확인</button>
              
      </div>
    );
  }
}
 
export default EventSample;
 

 

 

 

2. 함수형 컴포넌트

import React, { useState } from 'react';
 
const EventPractice = () => {
    // const [username, setUsername]  = useState('');
    // const [message, setMessage] = useState('');
  
    // const onChangeUsername = e => setUsername(e.target.value);
    // const onChangeMessage = e => setMessage(e.target.value);
    // const onClick = () => {
    //     alter(username + ", " + message);
    //     setUsername('');
    //     setMessage('');
    // }
 
    
  
    //username, message각각의 state를 form state 객체로 만듬
    const [form, setForm] = useState({
      username: '',
      message: ''
    });
  const { username, message } = form;
 
  const onChange = e => {
    setTimeout(() => console.log(e), 500);
    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="유저명"
        onChange={(e) => {console.log(e.target.value)}}
      />
 
      <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;

 

 

 

 

 

---

참조 : 리액트를 다루는 기술(김민준 / 길벗)