지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

리드 수준: React에서 이벤트 처리

WBOY
풀어 주다： 2024-07-17 17:25:13
원래의
768명이 탐색했습니다.

Lead level: Handling Events in React

리드 개발자로서 애플리케이션의 효율성, 유지 관리 및 확장성을 보장하려면 React의 고급 이벤트 처리 개념을 숙지하는 것이 중요합니다. 이 기사에서는 이벤트 핸들러 추가, 합성 이벤트 이해, 이벤트 핸들러에 인수 전달, 사용자 정의 이벤트 생성, 이벤트 위임 활용 등 React에서 이벤트를 처리하기 위한 정교한 기술과 모범 사례를 다룹니다.

이벤트 처리

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

JSX에서 이벤트 핸들러를 추가하는 것은 대화형 React 애플리케이션을 만드는 데 기본이 되는 간단한 프로세스입니다. JSX의 이벤트 핸들러는 HTML의 이벤트 핸들러와 유사하지만 React의 JSX 구문과 성능 및 가독성에 대한 구체적인 고려 사항이 있습니다.

이벤트 핸들러 추가 예:

import React from 'react';

const handleClick = () => {
  console.log('Button clicked!');
};

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

export default App;
로그인 후 복사

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

합성 이벤트

React는 합성 이벤트를 사용하여 이벤트가 다양한 브라우저에서 일관되게 작동하도록 합니다. 합성 이벤트는 브라우저의 기본 이벤트 시스템을 둘러싼 브라우저 간 래퍼로, React에서 이벤트를 처리하기 위한 통합 API를 제공합니다.

합성 이벤트의 예:

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) => {
  console.log(message);
};

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

export default App;
로그인 후 복사

바인드 방법을 사용한 예:

import React from 'react';

const handleClick = (message) => {
  console.log(message);
};

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

export default App;
로그인 후 복사

두 메소드 모두 추가 인수를 handlerClick 함수에 전달하여 이벤트 처리에 유연성을 제공할 수 있습니다.

맞춤 이벤트 처리

맞춤 이벤트 만들기

표준 이벤트를 넘어서는 더욱 복잡한 상호작용을 위해서는 맞춤 이벤트를 만드는 것이 필요할 수 있습니다. CustomEvent 생성자와 dispatchEvent 메소드를 사용하여 사용자 정의 이벤트를 생성하고 전달할 수 있습니다.

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

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

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

  useEffect(() => {
    const handleCustomEvent = (event) => {
      console.log(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') {
    console.log(`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을 확인하여 어떤 버튼이 클릭되었는지 확인하고 그에 따라 메시지를 기록합니다.

Best Practices for Event Handling in React

  1. Avoid Creating Inline Functions in JSX: Creating new functions inside the render method can lead to unnecessary re-renders and performance issues. Define event handlers outside the render method or use hooks. 
   const App = () => {
     const handleClick = () => {
       console.log('Button clicked!');
     };

     return (
       <div>
         <button onClick={handleClick}>Click Me</button>
       </div>
     );
   };
로그인 후 복사
  1. Prevent Default Behavior and Stop Propagation: Use event.preventDefault() to prevent default behavior and event.stopPropagation() to stop event propagation when necessary. 
   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return <form onSubmit={handleSubmit}>...</form>;
로그인 후 복사
  1. Clean Up Event Listeners: When adding event listeners directly to DOM elements, ensure to clean them up to avoid memory leaks. 
   useEffect(() => {
     const handleResize = () => {
       console.log('Window resized');
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
로그인 후 복사
  1. Debounce or Throttle High-Frequency Events: Use debounce or throttle techniques for high-frequency events like scrolling or resizing to improve performance. 
   const debounce = (func, delay) => {
     let timeoutId;
     return (...args) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         func.apply(null, args);
       }, delay);
     };
   };

   useEffect(() => {
     const handleScroll = debounce(() => {
       console.log('Scroll event');
     }, 300);

     window.addEventListener('scroll', handleScroll);

     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);
로그인 후 복사
  1. Use Event Delegation Wisely: Leverage event delegation for elements that are dynamically added or removed to the DOM, such as lists of items. 
   const List = () => {
     const handleClick = (event) => {
       if (event.target.tagName === 'LI') {
         console.log(`Item ${event.target.textContent} clicked!`);
       }
     };

     return (
       <ul onClick={handleClick}>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
       </ul>
     );
   };
로그인 후 복사

Conclusion

Handling events in React efficiently is crucial for creating interactive and high-performance applications. By mastering the techniques of adding event handlers, using synthetic events, passing arguments to event handlers, creating custom events, and leveraging event delegation, you can build robust and scalable applications. Implementing best practices ensures that your code remains maintainable and performant as it grows in complexity. As a lead developer, your ability to utilize these advanced techniques will significantly contribute to the success of your projects and the effectiveness of your team.

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

원천：dev.to
이전 기사：DayMG)의 DaysOfJavaScript 다음 기사：바퀴를 재발명하지 마세요! 또는 Vue 및 React 애플리케이션용 유틸리티 라이브러리
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1833
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2006
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1689
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1590
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1611
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿