useRef와 커스텀 훅을 활용하여 모달창 외부 클릭 시, 모달창 닫기 기능 구현

useRef 사용방법

useRef()를 이용해서 Ref객체를 만들어준 후, 이 객체를 특정 DOM에 Ref값으로 설정합니다.
이렇게 되면 Ref 객체의 current값이 특정 DOM을 가르키게 됩니다.

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

• 엘리먼트 크기를 가져와야 할 때
• 스크롤바 위치를 가져와야 할 때
• 엘리먼트에 포커스를 설정 해줘야 할 때 등

step 1.

useRef를 활용하여 선택하는 곳이 모달창의 내부인지 외부인지를 판별해 줘야 한다.

ModalPage를 만들었던 컴포넌트에 들어와 전체 모달창을 구현하는 div 태그에다 ref 값을 달아준다.

step 2.

커스텀 훅을 만들어준다.

미리 만들어두었던 src>hooks 폴더에 useOnClickOutside 파일을 생성했다.

useEffect인의 listener 함수에다 ref.current를 활용해 만약 if.current가 존재하지 않거나 event.target을 포함하고 있으면 아무것도 하지 않고 return을 해주고, 이외의 경우에는 모달창을 끄는 함수를 실행시켜주도록 handler를 소환하는 코드를 작성했다.

addEvetListener를 통해 mousedown 이나 touchstart 이벤트 발생시 listner 함수를 불러오게 했다.

(+ 언마운트 시에는 등록된 이벤트를 없애주는 코드를 useEffect의 return 부분에 작성해 주어야한다)

step 3

만든 커스텀 훅을 modal 컴포넌트 안에서 실행시킨다.

커스텀 훅 useOnClickOutside 함수를 Moviemodal 컴포넌트 안으로 import 해준 후
파라미터로 Modalref와 실행 시 setModalOpen(false)로 만들어 주는 콜백함수를 넣어준다.

사이트로 접속 해 이제 모달창 외부를 클릭하면 모달창이 닫히는 기능이 잘 동작되는 걸 확인할 수 있다.