React&#s useEffect 및 이벤트 리스너 이해: 심층 분석

React 구성 요소가 렌더링할 때마다 다시 등록하지 않고 어떻게 활성 이벤트 리스너를 유지할 수 있는지 궁금한 적이 있나요? 일반적인 사용 사례인 마우스 좌표 추적을 검토하여 이 수수께끼를 풀어보겠습니다.

퍼즐

마우스 위치를 추적하는 다음 React 구성요소를 고려해보세요.

import React from 'react';

function MouseCoords() {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  });

  React.useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
      });
    }
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div classname="wrapper">
      <p>
        {mousePosition.x} / {mousePosition.y}
      </p>
    </div>
  );
}

export default MouseCoords;

흥미로운 부분은 다음과 같습니다. 빈 종속성 배열([])은 useEffect가 한 번만 실행되지만 마우스를 움직일 때 구성 요소가 계속 업데이트된다는 의미입니다. 어떻게 작동하나요? ?

브라우저의 이벤트 시스템과 React의 렌더링

이 동작을 이해하려면 두 가지 별도의 시스템이 작동하고 있다는 점을 인식해야 합니다.

1. 브라우저의 이벤트 시스템: 이벤트 리스너를 관리하고 콜백을 트리거합니다
2. React의 렌더링 시스템: 구성 요소 업데이트 및 UI 렌더링을 처리

보안 카메라처럼 생각하십시오

집에 보안 카메라를 설치한다고 상상해 보세요.

• 설치([]를 사용한 useEffect)는 한 번만 수행됩니다.
• 카메라(이벤트 리스너)는 독립적으로 활성 상태를 유지합니다
• 움직임 발생 시 알람 발생(상태 업데이트)
• 움직임을 감지할 때마다 카메라를 다시 설치할 필요가 없습니다!

흐름 깨기

어떤 일이 일어나는지 단계별로 살펴보겠습니다.

1. 초기 설정(마운트 단계)

React.useEffect(() => {
  // Effect runs once on mount
  function handleMouseMove(event) {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  }
  window.addEventListener('mousemove', handleMouseMove);
}, []); // Empty array = run once

2. 이벤트 처리

마우스가 움직일 때:

• 브라우저의 이벤트 시스템이 움직임을 감지합니다
• 등록된 handlerMouseMove 함수를 호출합니다
• setMousePosition을 사용하여 React 상태를 업데이트하는 함수
• 새 좌표로 구성요소 다시 렌더링

3. 정리(중요!)

구성 요소가 마운트 해제되면 항상 이벤트 리스너를 정리해야 합니다. 전체 코드는 다음과 같습니다.

React.useEffect(() => {
  function handleMouseMove(event) {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  }
  window.addEventListener('mousemove', handleMouseMove);

  // Cleanup function
  return () => {
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

피해야 할 일반적인 함정

1. 정리 누락: 메모리 누수를 방지하려면 항상 이벤트 리스너를 제거하세요
2. 불필요한 종속성: 이벤트 리스너에 필요한 경우가 아니면 종속성을 추가하지 마세요
3. 재등록: 이벤트 리스너를 렌더링 본문에 넣지 마세요

실제 사례: 향상된 마우스 추적기

추가 기능을 갖춘 더욱 실용적인 버전은 다음과 같습니다.

import React from 'react';

function MouseCoords() {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  });

  React.useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
      });
    }
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div classname="wrapper">
      <p>
        {mousePosition.x} / {mousePosition.y}
      </p>
    </div>
  );
}

export default MouseCoords;

주요 시사점

1. 이벤트 리스너 등록(useEffect)과 이벤트 처리는 별도의 시스템입니다
2. 빈 종속성 배열([])은 "마운트 시 한 번 실행"을 의미합니다.
3. 브라우저 이벤트는 React의 렌더링 주기와 독립적으로 작동합니다
4. 마운트 해제 시 항상 리스너 정리

결론

React의 useEffect와 브라우저 이벤트 간의 관계를 이해하는 것은 고성능 React 애플리케이션을 구축하는 데 중요합니다. 브라우저의 이벤트 시스템을 올바르게 활용함으로써 불필요한 다시 렌더링이나 이벤트 리스너 등록 없이 반응형 인터페이스를 생성할 수 있습니다.

기억하세요: 이벤트 리스너는 우리의 충실한 보안 카메라와 같습니다. 한 번만 설치하면 제 역할을 하게 됩니다!

---

이 설명이 useEffect 및 이벤트 리스너를 더 잘 이해하는 데 도움이 되었나요? 여러분의 생각이나 질문을 아래에 댓글로 남겨주세요!

위 내용은 React&#s useEffect 및 이벤트 리스너 이해: 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!