1.문제점
모달을 감싸는 div 영역 바깥을 누르면 모달창이 닫아지고,취소 버튼을 눌러야지 닫아지는 방법을 구현하려고 했으나 모달 바깥 부분이랑 모달 영역을 누르면 닫아지는 현상
2.해결 과정
a.프로젝트에서 쓰는 것은 타입스크립트,리액트,리덕스 이렇게 쓴다.
리덕스가 익숙하지 않으니 나름 내 방식대로 해본다고 이건 당연히 useRef를 사용하면 되겠지 사용했지만 되지 않았다.....(이 부분은 커스텀 훅으로 따로 뺀 곳도 같이 파악 할 예정)
b.그러면 아예 이 모달을 사용하는 부모한테 상태관리를 해주고 함수를 넣어주면 되지 않을까?생각했다.하지만 놀랍도록 동작하지 않았다.
c.그래,그러면 그 모달 컴포넌트에서 click 이벤트를 아예 닫는 로직을 넣으면 되지 않을까?물론 이것은 동작이 되었지만 해당 모달 컴포넌트는 common 디렉토리에 있는 아이로 여기저기서 사용되고 있던 모달이였고 그 동작 이벤트를 하나로 마무리가 지으면 분명 문제가 생기기 때문에 빠른 포기를 했다.
.
.
.
이 과정을 거쳐서 초짜인 내가 어떻게 하면 원래 있던 코드와 기능을 터치하지 않고 구현할 수 있을까 고민을 하다가..................
3.해결방법
고민한 시간이 눈물나올 정도로 쉬운 문제였다.코드를 읽으면서 처음 보던 것이 보였고 아니 이게 뭐지?하고 쓰인 곳이 있나 해당 컴포넌트를 뒤져보니 없었다.
여기서 해결책을 찾았다.
타입스크립트를 사용하기 전에는 useRef 를 사용하면 됐었는데, 이미 정의되어 있는 Ref를 보면서 감을 못 찾았다.혹시나 하는 마음에 커스텀 훅으로 만든 useHook 파일에 있지 않을까 뒤지면서 해결 하려고 했지만 되지 않았다.
결국 해결은 이렇다.
<div onClick={close}>
<div onClick={e => e.stopPropagation()}>
.
.
.
</div>
</div>mdn에 읽는 문서에 정의된 것을 보자면,
Event.stopPropagation()
해당 매서드는 현재 이벤트가 캡쳐링 혹은 버블링 단계에서 더 이상 전파되지 않게 방지 한다고 한다.또한 전파를 방지해도 이벤트의 기본 동작은 실행되므로,버튼 클릭을 막거나 하는 것은 아니라고 합니다. 만약 이런 기본 동작을 방지하려고 하면 preventDefault() 메서드를 사용하면 된다고 합니다.
*추가적으로 해당 stopPropagation 메서드는 이벤트 대상에 부착한 다른 수시기까지 막지 않으니 이걸 막으려면 stopImmediatePropagation() 사용 하면 됩니다.
즉 모달 최상위에 있는 부모는 이미 창을 닫는 함수가 달려져 있었고 그걸 또 감싸는 아이에게 전파를 방지하는 것을 해주면 그만인 문제였다........
✍️ ✅
너무 쉬운 문제를 오랜 시간 끙끙 앓으면서 여러가지 경우의 수를 두고 해결하는 시간이 소중했던 것 같습니다. 사실 알고보면 쉽지만, 모를 때는 어떤 문제든 어렵다고 생각합니다.
오늘도 재밌게 공부했습니다 (간만에 꿀잠 가능...) 😄
