[React] React를 다루는 기술 4장 이벤트 핸들링

4. 이벤트 핸들링

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

1. 리액트의 이벤트 시스템

• HTML 이벤트와 인터페이스가 동일하다.

    const Say = () => {
      const [message, setMessage] = useState("");
      const onClickEnter = () => setMessage("안녕하세요");
      const onClickLeave = () => setMessage("안녕히 가세요!");

      const [color, setColor] = useState("black");
      return (
        <div>
          <button onClick={onClickEnter}>입장</button>
          <button onClick={onClickLeave}>퇴장</button>

• 주의점
  • 이벤트는 카멜케이스로 작성한다.(onclick -> onClick)
  • 이벤트에 실행할 JS 코드가 아니라 함수형태의 값을 전달.
    • HTML은 큰따옴표 안에 실행시킬 JS코드.
    • React는 함수형태의 객체.
  • DOM요소에만 이벤트 설정.
    • div, button같은 요소에는 이벤트 설정 가능. 우리가 직접 만든 컴포넌트에는 설정 불가. 그냥 onclick이라는 이름을 가진 props를 컴포넌트에 전달하게됨.
    • 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정하기도 함.
• 이벤트의 종류
  • Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Image, Mouse, Animation, Selection, Transition

이벤트 핸들링 연습

import React, { useState } from "react";

const EventPractice = (props) => {
  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 (
    <>
      <h1>이벤트연습</h1>
      <input
        type="text"
        name="messge"
        placeholder="아무거나 입력"
        value={username}
        onChange={onChangeUsername}
      ></input>
      <input
        type="text"
        name="messge"
        placeholder="아무거나 입력"
        value={message}
        onChange={onChangeMessage}
        onKeyPress={onkeypress}
      ></input>
      <button onClick={onClick}>확인</button>
    </>
  );
};

export default EventPractice;

• input요소를 렌더링하는 코드와 onChange 이벤트 설정.
• e객체는 SwntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체.
• SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나면 초기화되므로 정보를 참조할 수 없음.
• 비동기적으로 e 객체를 참조해야 한다면 e.persist() 함수를 호출해 두어야함.
• e.target.name을 사용하지않고 onChage관련 호출 함수를 2개 만들어줌.
• 하지만 인풋의 갯수가 많아진다면 e.target.name을 활용하는게 더 좋을수도 잇음.

const EventPractice = (props) => {
  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 (
    <>
      <h1>이벤트연습</h1>
      <input
        type="text"
        name="messge"
        placeholder="아무거나 입력"
        value={username}
        onChange={onChange}
      ></input>
      <input
        type="text"
        name="messge"
        placeholder="아무거나 입력"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      ></input>
      <button onClick={onClick}>확인</button>
    </>
  );
};

export default EventPractice;

• useState를 통해 사용하는상태에 문자열이 아닌 객체를 넣은 형태
• e.target.name을 쓰려면 위와 같이 인풋값들이 들어있는 form객체를 useState를 쓸때 사용하면 된다.

정리

• react의 이벤트를 순수 JS 또는 jQuery를 사용한 웹 어플리케이션에서 이벤트를 다루는 것과 비슷.
• 나중에 8장의 useReducer와 Hooks를 커스텀해 더 편하게 만들 수 있다.