이벤트핸들링

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 event 라고한다.

예시)💁🏼‍

버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고,
클릭했을 때는 onclick 이벤트를 실행한다.

• 함수형 컴포넌트로 구현하기
  EventPractice.js

 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 = () => {
    alert(username +':' + message) ;
    setUsername('');
    setMessage('');
   };
   
   const onKeyPress = (e) => {
    if (e.key === 'Enter') {
     onClick();
     }
    };
    
   return (
   <div> 
    <h1> 이벤트 연습 </h1>
    <input type='text' name='username' placeholder='사용자 이름' value={username} onChange={onChangeUsername} />
    <input type='text' name='message' placeholder='메시지를 입력하세요' value={message} onChange={onChangeMessage} onKeyPress={onKeyPress}/>
    <button onClick={onClick}> 확인 </button>
   </div>
   );
  };
  
  export default EventPractice;

• e.target.name 을 활용하여 useState를 통해 사용하는 상태에 문자열이 아닌 객체를 넣어보자.

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: '',
  });
  const { username, message } = form;
  const onChange = (e) => {
    const nextForm = {
      ...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;

e.target.name 값을 활용하려면, useState를 쓸 때 input 값들이 들어 있는 form 객체를 사용해주면된다.

함수형 컴포넌트에서 여러 개의 인풋 상태를 관리하기 위해 useState에서 form 객체를 사용하는 법을 알아보았다. 앞으로, useReducer와 커스텀 Hooks 를 사용하면 이 작업을 훨씬 수월하게 할 수 있다.