[React] React에서의 이벤트핸들링

1. 이벤트는 무엇일까?

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 모든 것

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다. 그래서 컴포넌트라는 것이 새로 생겼어도, 컴포넌트에 이벤트를 설정할 수가 없지요. 그렇게 하면 그냥 props로 어떠한 값을 넘겨주는 것과 다름 없는 행동을 한 것이다.
상식적으로 아래 코드는 말이 되지 않는다.

<MyComponent onClick = {doSomething}/>

그러나, 전달받은 props를 컴포넌트 내부의 DOM 이벤트로는 설정할 수 있다.

<div onClick = {this.props.onClick}>

이렇게 설정이 가능하다.

2. 리액트에서 지원하는 이벤트 종류

내가 아래에 있는 모든 이벤트를 이용하지는 않겠지만 알아두도록 하자.
https://reactjs.org/docs/events.html

3. e 객체의 정체

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

항상 이 코드를 생각 없이 쓰기만 했지..이것이 무엇을 의미하는지 곰곰히 생각해 본 적이 없다.
여기서 e는 바로 객체로, SyntheticEvent로, 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 네이티브 이벤트와 인터페이스가 동일하여서 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 동일하게 사용하면 된다.

그러나 주의해야 할 점이 있다. SyntheticEvent는 이벤트가 끝나고 나면, 이벤트가 초기화되므로 정보를 참조할 수 없다 즉 e 객체의 내부의 모든 값이 지워지게 된다.
그래서 비동기적으로 이벤트 객체를 사용하고 싶다면 e.persist()함수를 이용해주어야 한다.

4. key 바로 적용하기

import {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 = "아무거나 입력하세요"
			onChange = {onChange}
			onKeyPress = {onKeyPress}
		/>
        <button onClick = {onClick}>확인</button>
	</div>
);};
export default EventPractice;

여기서 input이 같은 event함수를 공유한다고 겁먹지 말자. 어짜피 얘네는 자기에게 해당하는 타겟에만 관심이 있기 때문이다. 대신에 key값을 정해주어서 name이라고 설정하여 한번에 state를 변경할 수 있게끔 만들었다.