useRef ( 외부 클릭시 모달 창 닫기 기능)

!insightEditBoxRef.current.contains(event.target)는 React에서 DOM 요소의 클릭 이벤트 처리와 관련된 중요한 패턴입니다.

1. useRef와 current

const insightEditBoxRef = useRef(null);

• useRef는 React 훅으로, 컴포넌트의 생명주기 동안 유지되는 가변값을 저장
• current 속성을 통해 실제 DOM 요소에 접근 가능
• 렌더링에 영향을 주지 않고 DOM 요소를 참조할 수 있음

2. contains() 메서드

insightEditBoxRef.current.contains(event.target)

• DOM Node 인터페이스의 메서드
• 한 노드가 다른 노드의 자손인지 확인
• true/false 반환
• 여기서는 클릭된 요소(event.target)가 insightEditBoxRef가 참조하는 요소의 내부에 있는지 확인

3. 일반적인 사용 패턴

useEffect(() => {
  const handleClickOutside = (event) => {
    if (
      insightEditBoxRef.current &&
      !insightEditBoxRef.current.contains(event.target)
    ) {
      // 클릭이 컴포넌트 외부에서 발생
      setInsightEditToggleIndex(null);
    }
  };

  document.addEventListener("mousedown", handleClickOutside);
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, [insightEditBoxRef]);

4. 주요 용도

1. 모달/팝업 외부 클릭 감지
   • 모달 외부 클릭 시 닫기
   • 드롭다운 메뉴 외부 클릭 시 닫기
2. 클릭 이벤트 전파 제어
   • 특정 영역 내/외부 클릭 구분
   • 이벤트 버블링 제어
3. 조건부 UI 업데이트
   • 외부 클릭 시 상태 변경
   • UI 컴포넌트 토글

5. 장점

• 깔끔한 사용자 경험 제공
• 직관적인 인터랙션 구현
• 메모리 누수 방지 (이벤트 리스너 정리)
• 불필요한 렌더링 방지

예시 사용 사례

// 드롭다운 메뉴 구현
const DropdownMenu = () => {
  const menuRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div ref={menuRef}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      {isOpen && (
        <ul className="dropdown-content">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      )}
    </div>
  );
};

이러한 패턴은 React 애플리케이션에서 모달, 드롭다운, 툴팁 등 다양한 인터랙티브 UI 요소를 구현할 때 널리 사용됩니다.

 

📍useRef란?

- reacthooks로 1.변수관리, 2.특정 dom 선택 할 때 사용

 

📍사용법

 

☑️import

import React, {useRef} from 'react'

☑️생성

const 변수명 = useRef(초기값)

➡️ 이러한 결과값으로, {current:  초기값}  을 지닌 객체가 반환된다.

 

 

useRef에서 기억할 것은 이러한 current라는 키값을 지닌 프로퍼티가 생성되고, 값에 어떤 변경을 줄때도 이 current를 이용해서 한다는 점이다.

 

📍특정 dom 선택하기

- js에서의 getelementbyid, queryselector와 비슷

- ref 사용하여 dom 선택

 

☑️함수형 컴포넌트에서 사용하기

 

 

1. useRef() 이용하여 Ref객체 만든다

const ref =  useRef();

 

2. 이 객체를 특정 dom에 ref을 설정 

<div className="modal" ref={ref}>

 

=> 이렇게 되면 ref객체의 .current 값이 특정 dom을 가리키게 됨

console.log('ref',ref.current);