모달창 외부 클릭 시 모달창 닫는 Custom Hooks 만들기

useRef

변수 관리 시 사용
특정 DOM 선택 시 사용

state를 사용해서 state가 변경되면 컴포넌트가 다시 렌더링 됨

하지만 ref를 사용하면 렌더링 되지 않음

 

자바스크립트

getElementById, querySelector 같은

DOM Selector 함수를 사용해 DOM을 선택함

 

리액트

ref를 이용해 DOM을 선택함

 

DOM을 직접 선택해야 하는 경우

1. 요소에 포커스를 설정해 주어야 할 경우
2. 요소의 크기를 가져와야 할 경우
3. 스크롤바 위치를 가져와야 할 경우 ...

 

useRef 사용법

useRef()를 이용해 Ref 객체를 만듦

이 객체를 특정 DOM애 ref 값으로 설정함

Ref 객체의 .current 값이 특정 DOM을 가리키게 됨

// Ref 객체를 만듦
const ref = useRef();
...

// Ref 객체를 요소의 ref 값으로 설정함
<div className="modal" ref={ref}>
</div>

 

/hooks/useOnClickOutside.jsx 파일 생성

export default function useOnClickOutside(ref, handler) {
  useEffect(() => {
    
    const listener = (event) => {
      // 모달창 안을 클릭했을 경우 return
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      // 모달창 밖을 클릭했을 경우 콜백함수 호출
      handler(event);
    };
    
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
    
    // 언마운트 시 이벤트 제거
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
}

useClickOutside(ref, () => {});

// 모달창 닫는 콜백함수를 인수로 전달
useOnClickOutside(ref, () => {
  setModalOpen(false);
});