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

4.1 리액트의 이벤트 시스템

---

• 이벤트(Event)
  사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것.
  

1. 이벤트 이름은 카멜 표기법으로 작성
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달
3. DOM 요소에만 이벤트 설정 가능
   div, button, input, from, span 등의 DOM 요소에는 이벤트 설정이 가능하지만 내가 만든 컴포넌트에 props로 함수를 전달해도 그것은 내가 만든 컴포넌트 안의 DOM 요소에서 사용할 수 있는 것이지 내가 만든 컴포넌트 자체에서 사용할 수 있는 것이 아니다.

// index.js
<MyComponent onClick={doSomething} />
  
// MyComponent.js
  <div onClick={this.props.onClick} />

4.2 예제로 이벤트 핸들링 익히기

4.3 함수 컴포넌트로 구현해 보기

---

책에서는 먼저 클래스형 컴포넌트의 형태를 다룬 뒤 함수형 컴포넌트로 바꾸면서 가르쳤는데, 나는 그냥 처음부터 함수형 컴포넌트로 작성하면서 공부했다.

클래스형 컴포넌트 쪽으로는 눈으로만이라도 읽으려고는 하지만 굳이... 손으로 짤 일은 딱히 없을 것 같기도 하고... 어쨌든 진도를 먼저 나가보기위해...

• 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다.
• SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다.
• 만약 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출해주어야 한다.

e.persist() 함수 설명 참고 블로그

import React, { useState } from "react";

const EventPractice = () => {
  const [message, setMessage] = useState("");
  console.log("message", message);

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해보세요"
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
      <button
        onClick={() => {
          alert(message);
          setMessage("");
        }}
      >
        CLEAR
      </button>
    </div>
  );
};

export default EventPractice;

import React, { useState } from "react";

const EventPractice = () => {
  const [message, setMessage] = useState("");
  console.log("message", message);

  const handleChange = (e) => {
    setMessage(e.target.value);
  };

  const handleClick = () => {
    alert(message);
    setMessage("");
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해보세요"
        value={message}
        onChange={handleChange}
      />
      <button onClick={handleClick}>CLEAR</button>
    </div>
  );
};

export default EventPractice;

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}>CLEAR</button>
    </div>
  );
};

export default EventPractice;

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}>CLEAR</button>
    </div>
  );
};

export default EventPractice;