선임 개발자로서 귀하는 React의 이벤트 처리에 대해 깊이 이해하고 있어야 합니다. 여기에는 기본 사항을 아는 것뿐만 아니라 효율적이고 유지 관리 가능하며 확장 가능한 애플리케이션을 만들기 위한 고급 기술을 익히는 것도 포함됩니다. 이 글에서는 이벤트 핸들러 추가, 합성 이벤트 이해, 이벤트 핸들러에 인수 전달, 사용자 정의 이벤트 생성, 이벤트 위임 활용 등 React에서의 복잡한 이벤트 처리를 다루고 있습니다.

이벤트 처리

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

JSX에서 이벤트 핸들러를 추가하는 것은 간단하고 일반 HTML에서 이벤트를 처리하는 것과 유사하지만 React의 고유한 아키텍처로 인해 몇 가지 주요 차이점이 있습니다.

이벤트 핸들러 추가 예:

import React from 'react';

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

const App = () => {
  return (
    

      Click Me
    
  );
};

export default App;

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

합성 이벤트

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

합성 이벤트의 예:

import React from 'react';

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

const App = () => {
  return (
    

      
    
  );
};

export default App;

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

이벤트 핸들러에 인수 전달

이벤트 핸들러에 인수를 전달하는 것은 화살표 함수나 바인드 메소드를 사용하여 수행할 수 있으며, 이는 보다 유연한 방식으로 이벤트를 처리하는 데 중요합니다.

화살표 기능을 사용한 예:

import React from 'react';

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

const App = () => {
  return (
    

       handleClick('Button clicked!')}>Click Me
    
  );
};

export default App;

바인드 방법을 사용하는 예:

import React from 'react';

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

const App = () => {
  return (
    

      Click Me
    
  );
};

export default App;

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

맞춤 이벤트 처리

맞춤 이벤트 만들기

표준 이벤트에서 다루지 않는 더 복잡한 상호 작용에는 React에서 사용자 정의 이벤트를 만드는 것이 필요합니다. 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 (
    
      Trigger Custom Event
    
  );
};

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 (
    

      1
      2
      3
    
  );
};

export default App;

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

React의 이벤트 처리 모범 사례

1. JSX에서 인라인 함수 생성 방지: 렌더 메서드 내에서 새 함수를 생성하면 불필요한 재렌더링 및 성능 문제가 발생할 수 있습니다. 대신 이벤트 핸들러를 클래스 메소드로 정의하거나 후크를 사용하십시오.

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

     return (
       

         Click Me
       
     );
   };

1. 기본 동작 방지 및 전파 중지: 기본 동작을 방지하려면 event.preventDefault()를 사용하고 필요한 경우 이벤트 전파를 중지하려면 event.stopPropagation()을 사용하세요.

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

   return 

1. 이벤트 리스너 정리: 이벤트 리스너를 DOM 요소에 직접 추가하는 경우 메모리 누수를 방지하기 위해 정리해야 합니다.

   useEffect(() => {
     const handleResize = () => {
       console.log('Window resized');
     };

     window.addEventListener('resize', handleResize);

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

1. 고주파 이벤트 디바운스 또는 조절: 스크롤이나 크기 조정과 같은 고주파 이벤트에 디바운스 또는 조절 기술을 사용하여 성능을 향상시킵니다.

   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. 이벤트 위임을 현명하게 사용하세요: 항목 목록과 같이 DOM에 동적으로 추가되거나 제거되는 요소에 대해 이벤트 위임을 활용하세요.

   const List = () => {
     const handleClick = (event) => {
       if (event.target.tagName === 'LI') {
         console.log(`Item ${event.target.textContent} clicked!`);
       }
     };

     return (
       

• Item 1
• Item 2
• Item 3

결론

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