<React> useMediaQuery()를 활용한 Modal 구현

useMediaQuery 사용하여 반응형 구현하기

참고블로그

<부제 : Modal 뜨면 Scroll 막기>
참고블로그

Tablet View부터 Icon을 클릭 시, Filter를 띄워야했습니다.

문제 1. 필터를 켜놓고 Tablet => Web view로 크기를 늘리면 Filter가 사라지지 않았습니다.

해결 방법 : useMediaQuery를 사용하여 분기점을 만들어 width : 992px까지만 Filter가 뜨도록 하였습니다.

문제 2. 필터가 뜬 상태에서 뒤에 Item 요소때문에 스크롤이 되는 이슈가 있었습니다.

해결 방법: 해당 이슈를 막기 위해 Real DOM을 다루어 조작하였습니다.

  const disabledScroll = showFilter
    ? (document.body.style.overflow = 'hidden')
    : (document.body.style.overflow = 'scroll');

import { useMediaQuery } from 'react-responsive'

const [showFilter, setShowFilter] = useState(false);

  const disabledScroll = showFilter
    ? (document.body.style.overflow = 'hidden')
    : (document.body.style.overflow = 'scroll');
  // 모바일 필터 Toggle 핸들러입니다. 필터가 뜨면 외부 스크롤을 방지합니다.
  // Real DOM을 건드리게 되는데, 더 좋은 방법이 있는지 공부해봐야합니다.

  const mobileFilterHandler = () => { // 모바일 필터가 활성화되면, 스크롤을 막습니다.
    setShowFilter(true);
    disabledScroll;
  };

// 모바일 필터를 닫는 핸들러입니다.
  const backgroundClickOutHandler = () => {
    setShowFilter(!showFilter);
  };

  // 태블릿 해상도를 지정합니다.
  const isTabletDevice = useMediaQuery({ query: '(max-width : 992px)' });

  /** 테블릿 화면에서 다시 커지면 mobile Filter State를 false로 변경시켜 View에서 지워지게 만듭니다.*/
  useEffect(() => {
    setShowFilter(false);
  }, [isTabletDevice, setShowFilter]);