Lami
삶이 온통 사람의 길이니
Lami
전체 방문자
오늘
어제
  • 분류 전체보기 (165)
    • Elice (1)
      • 회고록 (1)
    • Git (0)
    • HTML ▪ CSS (4)
    • JavaScript (7)
      • BOJ (2)
      • Programmers (0)
      • Study Note (5)
    • TypeScript (0)
    • React (21)
      • Lecture (19)
      • Study Note (2)
    • Python (44)
      • CodeUp (38)
      • Programmers (0)
      • Study Note (6)
    • Modern Agile (80)
      • Tech Talk (7)
      • TIL (73)
    • 문제해결 (1)
    • 회고록 (5)
    • 도란도란 (2)

블로그 메뉴

  • Github

공지사항

  • 👋 안녕하세요!

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Lami

삶이 온통 사람의 길이니

Day 38 - 2022.01.26
Modern Agile/TIL

Day 38 - 2022.01.26

2022. 1. 26. 16:24

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창 만들기

React에서 Modal 창을 만드는 간단한 방법에 대해 정리한 내용입니다

dkmqflx.github.io


TIL

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

'Modern Agile > TIL' 카테고리의 다른 글

Day 40 - 2022.01.28  (0) 2022.01.28
Day 39 - 2022.01.27  (0) 2022.01.27
Day 37 - 2022.01.25  (0) 2022.01.26
Day 36 - 2022.01.24  (0) 2022.01.24
Day 35 - 2022.01.21  (0) 2022.01.21
    'Modern Agile/TIL' 카테고리의 다른 글
    • Day 40 - 2022.01.28
    • Day 39 - 2022.01.27
    • Day 37 - 2022.01.25
    • Day 36 - 2022.01.24
    Lami
    Lami
    성장하는 즐거움을 알아가는 중입니다🌱

    티스토리툴바