4.1 리액트의 이벤트 시스템

    리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다. 3장에서 작성한 버튼 코드를 다시 한 번 살펴봅시다.

    Say.js

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

     

    사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 몇 가지 사항이 있습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.