[React] 이벤트 핸들링

 

이벤트 (Event)

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

onmouseover, onclick 이벤트 등

 

import React, { useState } from 'react';

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>
 ...

 

이벤트를 사용할 때 주의 사항

1. 이벤트 이름은 카멜 표기법으로 작성

HTML의 onclick -> 리액트 onClick

2. 이벤트에 함수 형태의 값 전달

위 코드 13~14행 참고

3. DOM 요소에만 이벤트 설정 가능

div, span, form 등 DOM 요소와 달리 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음

<MyComponent onClick={doSomething} />

위 코드는 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에 전달해주는 것

따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없지만 전달받은 prop를 컴포넌트 내부의 DOM 이벤트로 설정하는 것은 가능

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

 

이벤트 핸들링 실습

1-1. 컴포넌트 생성

src 밑에 component 폴더 생성 후 EventPractice.js 파일 생성

// EventPractice.js
export default function EventPractice() {

  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

1-2. App.js에서 EventPractice 렌더링

import "./App.css";
import EventPractice from "./component/EventPractice";

function App() {
  return (
    <div className="App">
      <EventPractice />
    </div>
  );
}

export default App;

2-1. onChange 이벤트 설정

input 요소를 렌더링하고 onChange 이벤트 설정 

→ input 값이 바뀔 때마다 값을 콘솔에 기록

export default function EventPractice() {

  return (
    <div>
      <h1>Hello</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
    </div>
  );
}

2-2. state에 input 값 담기

input에 입력을 했을 때 오류가 나지 않는다면 state에 텍스트를 잘 담은 것

import React, { useState } from "react";

export default function EventPractice() {
  const [message, setMessage] = useState("");

  return (
    <div>
      <h1>Hello</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
    </div>
  );
}

2-3. state에 값이 제대로 들어갔는지 검증

button에 클릭 이벤트가 발생하면 텍스트를 alert로 띄우고 input을 공백으로 설정

import React, { useState } from "react";

export default function EventPractice() {
  const [message, setMessage] = useState("");

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

3. 함수를 미리 준비하여 전달하기

가독성을 더 높이는 방법

import React, { useState } from "react";

export default function EventPractice() {
  const [message, setMessage] = useState("");

  const onChangeMessage = (e) => setMessage(e.target.value);

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

  return (
    <div>
      <h1>Hello</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChangeMessage}
      />
      <button onClick={onClickButton}>확인</button>
    </div>
  );
}

4. input 여러개 다루기

e.target.name 값 사용하기

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

import React, { useState } from "react";

export default function 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 onClickButton = () => {
    alert(username + ": " + message);
    setForm({
      username: "",
      message: "",
    });
  };

  return (
    <div>
      <h1>Hello</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChange}
      />
      <button onClick={onClickButton}>확인</button>
    </div>
  );
}