모달창 외부 클릭 시 모달 닫기

React에서 지원하는 ref와 JavaScript의 EventListener를 사용하여 외부 클릭을 감지할 수 있다.

🤔 ref란 ?

ref 는 references 의 약자로,  React 에서 특정 컴퍼넌트를 접근하는 데에 사용하거나 값이 변해도 리렌더링하지 않도록 하는 변수로도 사용할 수 있다.

useRef라는 훅을 사용하여 ref를 활용한다.

 

📌 Hook기반의 컴포넌트로 구현하기

const ref = useRef()를 통해 ref 객체를 반환하고, div 요소에 ref={ref}값을 연결해준다.
이후 ref.current를 하면, 위에서 부여한 div 요소에 접근 가능한 id처럼 사용할 수 있다.

 

컴포넌트의 외부 클릭을 감지하려면 아래와 같이 감지 여부 조건을 활용할 수 있다.

if (!ref.current || ref.current.contains(e.target)) return;

그리고 useEffect 안에서 등록한 이벤트는 컴포넌트의 마운트가 해제될 때 이벤트도 삭제되어 성능을 향상시킬 수 있도록 리턴 값 removeEventListener로 이벤트를 삭제해야 한다.

useEffect(() => {
	const listener = e => {
		// 모달 안을 클릭했는지
		if (!ref.current || ref.current.contains(e.target)) return;
		// 모달 밖을 클릭했는지
		handler();
	};
	document.addEventListener("mousedown", listener);
	return () => {
		document.removeEventListener("mousedown", listener);
	};
}, [ref, handler]);