리액트 컴포넌트 외부에서 클릭 감지

이 글에서 설명하는 대로, 컴포넌트 외부에서 클릭 이벤트가 발생했는지 감지하는 방법을 찾고 있습니다. 클릭 이벤트의 대상이 부모 요소 중 하나로 DOM 요소를 갖고 있는지 확인하기 위해 jQuery closest()를 사용합니다. 일치하는 경우, 클릭 이벤트는 자식 중 하나에 속하므로 컴포넌트 외부로 간주되지 않습니다.

그래서 내 컴포넌트에는 window에 클릭 핸들러를 추가하고 싶습니다. 핸들러가 실행되면 대상을 내 컴포넌트의 DOM 자식들과 비교해야 합니다.

클릭 이벤트에는 path와 같은 속성이 있는데, 이는 이벤트가 이동한 DOM 경로를 보유하는 것 같습니다. 무엇을 비교해야 할지 또는 어떻게 최상의 방법으로 탐색해야 할지 확신이 없고, 이미 잘 만들어진 유틸리티 함수에 그런 내용이 있을 것 같습니다... 아마요?

답변 1

16.3 이후

import React, { Component } from react;
/**
 * Click 영역 바깥을 클릭할 경우 알림하는 컴포넌트
 */
export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);
    this.wrapperRef = React.createRef();
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }
  componentDidMount() {
    document.addEventListener(mousedown, this.handleClickOutside);
  }
  componentWillUnmount() {
    document.removeEventListener(mousedown, this.handleClickOutside);
  }
  /**
   * 요소 외부를 클릭하면 알림
   */
  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
      alert(나의 외부를 클릭했습니다!);
    }
  }
  render() {
    return <div ref={this.wrapperRef}>{this.props.children}</div>;
  }
}

16.3 이전

import React, { Component } from react;
/**
 * 컴포넌트는 클릭이 외부에서 발생하면 알림을 표시합니다.
 */
export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }
  componentDidMount() {
    document.addEventListener(mousedown, this.handleClickOutside);
  }
  componentWillUnmount() {
    document.removeEventListener(mousedown, this.handleClickOutside);
  }
  /**
   * 래퍼 ref를 설정합니다.
   */
  setWrapperRef(node) {
    this.wrapperRef = node;
  }
  /**
   * 엘리먼트 외부를 클릭하면 알림을 표시합니다.
   */
  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert(나의 외부를 클릭했습니다!);
    }
  }
  render() {
    return 
{this.props.children}
;
  }
}

답변 2

리액트 컴포넌트 외부에서 클릭 감지하기
------------------------------------------------------
리액트 컴포넌트를 개발할 때, 종종 컴포넌트 외부에서 발생한 클릭 이벤트를 감지해야 하는 상황이 있습니다. 예를 들어, 모달창이 열려 있는 상태에서 모달 외부를 클릭하면 모달이 닫히도록 구현하고 싶을 때가 있을 것입니다. 이러한 상황에서는 컴포넌트 외부의 클릭을 감지하는 방법이 필요합니다.
가장 간단한 방법은 React의 SyntheticEvent 객체를 활용하여 컴포넌트 내부 및 외부의 클릭을 모두 감지하는 것입니다. 이 방법은 컴포넌트의 가장 상위에 위치한 div 요소에 이벤트 리스너를 등록하는 것입니다. 이 div 요소는 컴포넌트의 전체 영역을 감싸고 있으므로, 클릭이 발생한 위치가 컴포넌트 내부인지 외부인지를 판단할 수 있습니다.
하지만, 이 방법은 성능 문제를 야기할 수 있습니다. 왜냐하면 클릭 이벤트가 발생할 때마다 리액트는 전체 컴포넌트 트리를 검사하며 갱신해야하기 때문입니다. 만약 컴포넌트가 매우 복잡하거나 하위 컴포넌트가 많은 경우, 이 방법은 퍼포먼스에 악영향을 줄 수 있습니다.
이러한 문제를 해결하기 위해, React를 이용하여 컴포넌트 외부의 클릭을 감지하는 방법이 있습니다. 이 방법은 React의 Portals 기능을 활용하는 것입니다. 포탈은 컴포넌트의 트리 구조를 무시하고 독립적으로 렌더링되는 기능을 말합니다. 즉, 컴포넌트 외부에서 만든 HTML 요소를 React 컴포넌트 내부에 표시할 수 있습니다.
이 방법은 외부 클릭을 감지하기 위해 다른 요소를 사용하는 방식입니다. 예를 들어, 모달창의 바깥 영역을 클릭하면 모달이 닫히도록 구현하려면, 모달컴포넌트 외부에 클릭 이벤트를 감지할 수 있는 레이어를 생성하는 것입니다. 이 레이어는 모달컴포넌트와 독립적으로 렌더링되며, 클릭 이벤트를 처리할 수 있는 이벤트 리스너를 포함합니다. 이 방법은 리액트의 Portals을 활용하여 외부 클릭을 감지할 수 있으므로, 컴포넌트의 깊이나 복잡도에 상관없이 일관된 성능을 유지할 수 있습니다.
리액트 컴포넌트 외부에서 클릭을 감지하는 것은 종종 필요한 기능입니다. 이를 위해 SyntheticEvent 객체나 React의 Portals을 사용할 수 있습니다. 각각의 방법은 장단점이 있으며, 상황에 따라 적합한 방법을 선택하여 개발하면 됩니다. 클릭 외에도 다른 이벤트(예: 터치)를 감지하는 방법도 유사하게 적용할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.