6. React에서 이벤트 처리하기

차이점 리액트에서 지원하는 이벤트 종류 예시1️⃣이벤트 사용하기 상태 관리(useState)+ 이벤트 사용하기 예시2️⃣이벤트 사용하기 상태 관리(useState) + 이벤트 사용하기

리엑트에서 이벤트 처리하는 방식에 대해서 알아보겠습니다. React 엘리먼트에서 이벤트 처리하는 방식은 DOM엘리먼트에서의 이벤트 처리하는 방식과 비슷하지만 다른점도 있습니다.

차이점

React의 이벤트는 카멜케이스를 사용합니다. / DOM의 이벤트는 소문자를 사용합니다.

JSX를 사용하여 함수로 이벤트 핸들러를 전달합니다. / DOM은 문자열로 이벤트를 전달합니다.


<body>
  <button onclick="addNumber()">Click me!</button>
  <script>
    function addNumber() {
      console.log("Im button");
    }
  </script>
</body>

DOM 엘리먼트 이벤트 처리


function Resume(props) {
  const [like, setLike] = useState(0);

  function clickLike() {
    setLike(like + 1);
  }

  return (
    <button onClick={clickLike}>like</button> <span>{like}</span>
  );
}

export default Resume;

React 엘리먼트 이벤트 처리

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

onClick

onChange

onInput

onFocus

onMouse

onLeave

기타 (아래 첨부한 링크에서 더 많은 이벤트를 확인할 수 있습니다.)

합성 이벤트(SyntheticEvent) - React

이 문서는 React의 이벤트 시스템 일부를 구성하는 SyntheticEvent 래퍼를 설명합니다. 더 많은 정보는 이벤트 처리하기 문서를 보세요. 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받습니다. stopPropagation() 와 preventDefault() 를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. 브라우저의 고유 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조하세요.

https://ko.reactjs.org/docs/events.html#other-events

예시1️⃣

이벤트 사용하기


import React from "react";

const Greeting = () => {
  const onMouseEnter = () => {
    console.log("안녕하세요!");
  };

  const onMouseLeave = () => {
    console.log("안녕히가세요");
  };

  return (
    <div>
      <p onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
        여기에 마우스를 올려보세요!
      </p>
    </div>
  );
};

export default Greeting;

상태 관리(useState)+ 이벤트 사용하기


import React, { useState } from "react";

const Greeting = () => {
  const [message, setMessage] = useState("여기를 주목하세요");

  const onMouseEnter = () => {
    setMessage("안녕하세요!");
  };

  const onMouseLeave = () => {
    setMessage("안녕히가세요!");
  };

  return (
    <div>
      <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
        여기에 마우스를 올려보세요!
      </div>
      <div>{message}</div>
    </div>
  );
};

export default Greeting;

예시2️⃣

이벤트 사용하기


import React from "react";

const Login = () => {
  const LoginSubmit = (e) => {
    e.preventDefault();
    console.log("submit");
  };

  const LoginInput = (e) => {
    console.log("id", e.target.value);
  };

  const passwordInput = (e) => {
    console.log("pw", e.target.value);
  };

  return (
    <form onSubmit={LoginSubmit}>
      <label>
        아이디 : <input type="text" onChange={LoginInput} />
      </label>
      <label>
        비밀번호 :
        <input type="password" onChange={passwordInput} />
      </label>
      <button type="submit">로그인</button>
    </form>
  );
};

export default Login;

상태 관리(useState) + 이벤트 사용하기


import React, { useState } from "react";

const Login = () => {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");
  const LoginSubmit = (e) => {
    e.preventDefault();
    console.log("submit");
    alert(`id : ${id}, pw : ${pw}`);
  };

  const LoginInput = (e) => {
    console.log("id", e.target.value);
    setId(e.target.value);
  };

  const passwordInput = (e) => {
    console.log("pw", e.target.value);
    setPw(e.target.value);
  };

  return (
    <form onSubmit={LoginSubmit}>
      <label>
        아이디 : <input type="text" onChange={LoginInput} />
      </label>
      <label>
        비밀번호 :
        <input type="password" onChange={passwordInput} />
      </label>
      <button type="submit">로그인</button>
    </form>
  );
};

export default Login;