Day 38 - 2022.01.26

Note

오늘은 어제에 이어서 모달 레이아웃을 완성하기로 했다.

나는 라이브러리를 사용하지 않고 모달을 만들고 싶어서 구글링을 하며 시도했다.

나름 완성했다고 생각했지만 생각지도 못한 2가지 버그가 있었다.

 

 

이 중 모달을 열었을 때 기존(배경) 페이지가 스크롤이 되는 현상을 먼저 해결하고자 했다.

모달을 열었을 때는 스크롤이 사라지도록 구현해야 했는데 구글링으로 useEffect를 사용해서 해결하는 방법을 찾았다. 모달 function 안에 아래 코드처럼 작성하는 것이었다.

useEffect(() => {
    if (visible) {
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [visible]);

위 코드를 통해 원하던 대로 모달을 사용할 때 기존 페이지가 스크롤되지 않도록 했는데 코드를 이해하지는 못했다. useEffect 안에서 return을 사용하는 것은 처음 봤기 때문에 이를 구글링했지만 찾지 못했다. 결국 한결오빠한테 물어봤고,

useEffect 안에서 return은 useEffect가 다시 실행될 때 실행하는 것으로, 첫 useEffect 실행 때는 return은 실행하지 않는다는 것을 알게 되었다.

따라서 위 코드는 visible의 변화가 있을 때마다 그려지는데 처음에는 overflow 스타일이 없다가 모달 버튼을 눌러서 visible이 true가 되었을 때 body에 overflow = ‘hidden’ 이라는 스타일을 주고, 모달을 닫았을 때는 visible이 false가 되며, return이 먼저 실행되기 때문에 body에 overflow = ‘unset’이 적용된다.

return이 먼저 실행되고, return보다 먼저 작성한 코드는 return 뒤에 실행이 되어야 하지만 위 코드에서는 if (visible) 이라는 조건을 달았기 때문에 visible이 false일 때, 즉 모달을 닫았을 때는 실행되지 않는 코드이다.

 

이제 남은 버그인 모달 박스 내부를 클릭해도 모달이 사라지는 버그를 해결해보자.

구글링을 해보니 모달 창의 z-index가 더 높지만, 모달 내부를 클릭해도 모달이 닫히는 이유는 부모 - 자식 요소 간에는, 자식 요소가 부모 요소보다 z-index가 높다고 해서 더 위에 있는 요소가 되지 않는다고 한다.

따라서 부모 - 자식 간에는 z-index로 구분할 수 없기 때문에 눌렀을 때 그곳이 이벤트가 일어나는 곳인지 비교를 해야 한다고 한다.

e.target과 e.currentTarget을 비교하는 방법인 것이다.

const onCloseModal = (e) => {
    if (e.target === e.currentTarget) {
      handleModalState(visible);
    }
  };

이렇게 모달 버그를 해결했다!

 

/* 모달 만들 때 참고했던 블로그 : https://dkmqflx.github.io/frontend/2021/04/26/react-modal-close/  */

React에서 Modal창 만들기

---

TIL

• useEffect 안에서 사용하는 return의 의미
  • useEffect 안에서 return은 useEffect가 다시 실행될 때 실행하는 것으로, 첫 useEffect 실행 때는 return은 실행하지 않는다