[사용법] useOutSideClick

[mingki831]

hooks > useOutSideClick.js

검색 페이지 모달 부분을 구현하다가 모달 밖을 클릭했을 때 모달창이 닫히게 하는 부분을 위해 공통적으로 사용할 수 있는 hook을 추가해놓았습니다!

hook 내용은, ref로 지정한 요소의 밖을 클릭했을 때 callback 함수를 실행시켜준다는 내용입니다.

제가 모달에 적용한 부분입니다. 먼저 hook을 import 해준 상태에서 useRef를 사용해 ModalWrap의 컨테이너 요소를 담아줍니다. 그리고 ModalWrap의 외부를 클릭했을 때 handleClose()가 실행되도록 설정해주었습니다. handleClose()에는 모달창을 닫는 useState가 존재하는 페이지에서 모달창을 닫는 함수를 props로 받아와서 넣어주기만 하시면 됩니다. (제 경우 onClose)

확인해주시면 PR 올리겠습니다!

[JMKiim]

확인했습니다. 혹시 모달 애니메이션도 적용해보셨나요??

[mingki831]

@mingki831 추가해놓았습니다 😊