찾다

집 >웹 프론트엔드 >JS 튜토리얼 >중간 수준: React에서 이벤트 처리하기

중간 수준: React에서 이벤트 처리하기

PHPz
PHPz원래의
2024-07-18 09:58:281054검색

Mid level: Handling Events in React

중급 개발자로서 대화형 및 동적 애플리케이션을 만드는 데 필수적인 React의 이벤트 처리에 대한 확실한 이해가 있어야 합니다. 이 가이드에서는 이벤트 핸들러 추가, 합성 이벤트 이해, 이벤트 핸들러에 인수 전달, 사용자 정의 이벤트 생성, 이벤트 위임 활용 등을 포함한 고급 개념과 모범 사례를 다룹니다.

이벤트 처리

JSX에 이벤트 핸들러 추가하기

React에서는 이벤트 핸들러를 JSX에 직접 추가할 수 있습니다. 이벤트 핸들러는 버튼 클릭이나 양식 제출과 같은 특정 이벤트가 발생할 때 호출되는 함수입니다. JSX에서 이벤트 핸들러를 추가하는 것은 일반 HTML에서 수행되는 방법과 유사하지만 React의 JSX 구문을 사용합니다.

이벤트 핸들러 추가 예:

import React from 'react';

const handleClick = () => {
  alert('Button clicked!');
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default App;

이 예에서는 버튼을 클릭할 때마다 handlerClick 함수가 호출됩니다. JSX의 onClick 속성은 이벤트 핸들러를 지정하는 데 사용됩니다.

합성 이벤트

React는 합성 이벤트라는 시스템을 사용하여 이벤트를 처리합니다. 합성 이벤트는 브라우저의 기본 이벤트 시스템을 둘러싼 브라우저 간 래퍼입니다. 이렇게 하면 이벤트가 다양한 브라우저에서 일관되게 작동할 수 있습니다.

합성 이벤트의 예:

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

이 예에서 handlerInputChange 함수는 입력 필드의 값이 변경될 때마다 이를 기록합니다. 이벤트 매개변수는 모든 브라우저에서 일관된 이벤트 속성을 제공하는 합성 이벤트입니다.

이벤트 핸들러에 인수 전달

때때로 이벤트 핸들러에 추가 인수를 전달해야 하는 경우가 있습니다. 이는 화살표 기능이나 바인드 메소드를 사용하여 수행할 수 있습니다.

화살표 기능 사용 예시:

import React from 'react';

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

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

바인드 방법을 사용한 예:

import React from 'react';

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

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

두 가지 방법을 모두 사용하면 handlerClick 함수에 추가 인수를 전달할 수 있습니다.

맞춤 이벤트 처리

맞춤 이벤트 만들기

React의 합성 이벤트는 대부분의 일반적인 사용 사례를 다루지만, 보다 복잡한 상호 작용을 위해서는 맞춤 이벤트를 만들어야 할 수도 있습니다. CustomEvent 생성자와 dispatchEvent 메소드를 사용하여 사용자 정의 이벤트를 생성하고 전달할 수 있습니다.

맞춤 이벤트 생성 및 전달의 예:

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

이 예에서는 버튼을 클릭할 때 customEvent라는 맞춤 이벤트가 생성되어 전달됩니다. 이벤트 핸들러는 사용자 정의 이벤트를 수신하고 이벤트의 세부 메시지와 함께 경고를 표시합니다.

React의 이벤트 위임

이벤트 위임은 단일 이벤트 리스너를 사용하여 여러 요소에 대한 이벤트를 관리하는 기술입니다. 이는 특히 목록이나 테이블에서 이벤트를 효율적으로 관리하는 데 유용합니다.

이벤트 위임 예시:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

이 예에서는 div 요소의 단일 이벤트 핸들러가 모든 버튼에 대한 클릭 이벤트를 관리합니다. 이벤트 핸들러는 event.target을 확인하여 어떤 버튼이 클릭되었는지 확인하고 그에 따라 경고를 표시합니다.

React의 이벤트 처리 모범 사례

  1. 이벤트 핸들러를 현명하게 사용하세요: 성능 문제가 발생할 수 있으므로 렌더링 메서드 내에서 새로운 이벤트 핸들러 함수를 생성하지 마세요. 대신, render 메서드 외부에서 이벤트 핸들러를 정의하세요.

  2. 기본 동작 방지: 양식 제출이나 앵커 태그 클릭과 같은 필요할 때 이벤트의 기본 동작을 방지하려면 event.preventDefault()를 사용하세요.

   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return <form onSubmit={handleSubmit}>...</form>;
  1. 전파 중지: 필요할 때 이벤트가 상위 요소로 전파되는 것을 중지하려면 event.stopPropagation()을 사용하세요. 
   const handleButtonClick = (event) => {
     event.stopPropagation();
     // Handle button click
   };

   return <button onClick={handleButtonClick}>Click Me</button>;

  1. 디바운싱 및 제한: 디바운싱 또는 제한 기술을 사용하여 스크롤이나 크기 조정과 같이 빈도가 높은 이벤트에 대해 이벤트 핸들러가 호출되는 횟수를 제한합니다.

  2. 이벤트 리스너 정리: 이벤트 리스너를 DOM 요소(특히 클래스 구성 요소 또는 후크)에 직접 추가하는 경우 메모리 누수를 방지하기 위해 정리해야 합니다.

   useEffect(() => {
     const handleResize = () => {
       // Handle resize
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);

결론

React에서 이벤트를 처리하는 것은 대화형 애플리케이션을 만드는 데 필수적입니다. 이벤트 핸들러를 추가하고, 합성 이벤트를 사용하고, 이벤트 핸들러에 인수를 전달하고, 사용자 정의 이벤트를 생성하고, 이벤트 위임을 활용하는 방법을 이해하면 보다 동적이고 효율적인 React 애플리케이션을 구축할 수 있습니다. 모범 사례를 구현하면 애플리케이션이 복잡해짐에 따라 성능과 유지 관리 가능성을 유지할 수 있습니다. 중급 개발자로서 이러한 기술을 익히면 복잡한 상호 작용을 처리하는 능력이 향상되고 프로젝트 성공에 기여할 수 있습니다.

위 내용은 중간 수준: React에서 이벤트 처리하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html define for while using class Attribute Event number function default constructor dom this alert input
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：TypeScript에서 `Array`와 `T[]`의 차이점 이해다음 기사：TypeScript에서 `Array`와 `T[]`의 차이점 이해

관련 기사

더보기