TIL customHook 모달창

 

 

https://0119eunji.tistory.com/43

관심사의 분리 / Custom Hook

 

👆 customHook 관련 포스팅

 

 

 

 

 

customHook

 

: 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있는 사용자 hook

 

 

 

 

 

 

👆 라고 리액트 공식문서엔 쓰여있다

 

 

 

 

 

 

 

여러번 보아도 이해가 되지 않던 custom Hook! 모달창을 만들어보며 소 뒷걸음치다 생쥐 잡은 격으로 나도 모르게 쓰고 있었다 ☺️

바로 모달창 바깥을 눌렀을 때 모달창이 닫히는 기능을 구현하면서 써보았는데

 

 

 

 

 

 

 

useOnclickOutside.js 파일이 바로 customHook이었다.

useRef를 outside라는 변수에 useRef의 반환값을 할당에 담아(useRef는 Modal에 걸어놓음) setModal과 함께 useOnclickOutside.js 에 넘겨주었다.

 

 

 +  useRef는 react 내장훅으로 특정 DOM을 선택 할 수 있게 하는 기능을 가진 훅이다 +

 +  ref를 설정해 준 요소는 직접 DOM을 선택했기 때문에 해당 요소의 여러 데이터를 활용할 수 있다 + 

 

 

해당 useOnclickOutside.js 안에는 문서에서 마우스를 누른 순간 listener라는 이벤트가 발생하고 ref 값이 true거나 ref의 current에 event.target이 있을 때 return 할 수 있게 했다. (만약 이 두 조건을 충족하지 않는다면 handler()함수 호출)

이는 모달창에서 이벤트가 발생하면 아무런 동작을 하지 않고 끝내겠다 라는 의미이다. 

 

 

 

 

이렇게 해서 여영부영 custom 훅을 쓴 것 같다

모달창 밖을 눌렀을 때 꺼지는 내 커스텀 훅... 하지만 이해도가 너무 떨어져 사실 handler() 함수가 왜 있는지도 모르겠다

이를 없애 봤으나 아예 작동하지 않았고 if문의 Return 문제인가 싶어서 대신 alert를 넣더니 alert만 작동되고 꺼지진 않았다 ☺️

이는 좀 더 연구하고 공부해서 글을 추가할 예정이다