React에서 event 핸들링하는 방법

2023-03-31

안녕하세요.

지난 시간에는 반복문을 사용해서 컴포넌트를 렌더링하는 방법에 대해서 알아봤습니다.

이번 시간에는 React에서 이벤트를 핸들링하는 방법에 대해서 알아보겠습니다.

자바스크립트에서 DOM에 이벤트를 등록하는 방법은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <button onclick="document.getElementById('result').innerHTML = 'Hello World!'">What time is it?</button>
  <p id="result"></p>
</body>
</html>

그러나 React에서는 onclick 대신에 onClick을 사용합니다.

이와 마찬가지로 javascript에서는 onclick, onmouseover, onmouseout, onfocus, onblur 등의 이벤트를 사용하지만, React에서는 onClick, onMouseOver, onMouseOut, onFocus, onBlur 등의 이벤트를 사용합니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const element = <button onClick={() => alert("pressed")} onMouseOut={() => alert("bye")}>Press</button>;
    ReactDOM.render(element, rootElement);
  </script>
  <p id="result"></p>
</body>
</html>

위의 코드를 실행하면 다음과 같이 버튼을 클릭하거나 마우스를 올리면 이벤트가 발생합니다.

위 코드에서 이벤트를 함수로 정의해서 사용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const handleClick = () => alert("pressed");
    const handleMouseOut = () => alert("bye");
    const element = <button onClick={handleClick} onMouseOut={handleMouseOut}>Press</button>;
    ReactDOM.render(element, rootElement);
  </script>
  <p id="result"></p>
</body>
</html>

이렇게 React에서 이벤트를 핸들링하는 방법에 대해서 알아보았습니다.

감사합니다.

< 목록으로 돌아가기