8. 이벤트핸들러

in Library on React


  • 이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것
    • 웹 브라우저의 HTML 이벤트와 인터페이스가 동일
    • 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값 전달
    • DOM 요소에만 이벤트를 설정할 수 있다
      • 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다
  • 리액트가 지원하는 이벤트 종류
    • Clipboard
    • Composition
    • Keyboard
    • Focus
    • Form
    • Mouse
    • Selection
    • Touch
    • UI
    • Wheel
    • Media
    • Image
    • Animation
    • Transition

이벤트핸들링

<div>
  <h1>이벤트 연습</h1>
  <input type="text"
    name="message"
    placeholder="아무거나 입력해보세요"
    onChange={(e) => {
      console.log(e);
    }}
  />
</div>
  • 콘솔에 기록되는 e 객체는 SyntheticEvent
    • 웹 브라우저의 네이티브 이벤트를 감싸는 객체
    • 이벤트가 끝나면 초기화되므로 정보를 참조할 수 없다
    • 비동기적으로 비엔트 객체 참조시, e.persist() 함수 호출
    • e.target.value를 이용해 값 접근

state 이용

import React, { useState } from 'react';
const EventPractice = () => {
  const [message, setMessage] = useState('');
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input type="text"
      name="message"
      placeholder="아무거나 입력해보세요"
      onChange={ (e) => setMessage(e.target.value) }
      value={message} />
      <button onClick={ (e) =>{
        alert(message);
      setMessage('')} }>확인</button>
    </div>
  );
};
export default EventPractice;

임의 메서드 만들기

import React, { useState } from 'react';

const EventPractice = () => {
  const [message, setMessage] = useState('');
  const onChangeMessage = (e) => setMessage(e.target.value);
  const onClick = () => {
    alert(message);
    setMessage('');
  };
  
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input type="text"
        name="message"
        placeholder="아무거나 입력해보세요"
        value={message}
        onChange={onChangeMessage}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
export default EventPractice;

e.target.name

import React, { useState } from 'react';
const EventPractice = () => {
  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: '',
    });
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input type="text"
        name="username"
        placeholder="유저명"
        value={username}
      onChange={onChange} />
      <input type="text"
        name="message"
        placeholder="아무거나 입력해보세요"
        value={message}
        onChange={onChange}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
export default EventPractice;
  • e.target.name : 해당 인풋의 name을 가리킨다

onKeyPress

const onKeyPress = (e) => {
  if (e.key === 'Enter') {
    onClick();
  }
};
  • enter키 눌렀을때 메서드 호출