React 페이지 모바일 여부 판별 위한 GetIsMobile 모듈 사용

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2021년 11월

배경

• 웹 개발을 하다보면 데스크탑, 모바일 등 다양한 경우를 고려해야 함.
• 모바일 경우를 고려할 때 모바일 여부를 판별하는 방법에 여러가지가 있겠지만, 그 중 한 가지를 정리해보고자 함

GetIsMobile 모듈 활용

• 브라우저의 사이즈를 트래킹하여 해당 브라우저가 모바일의 경우인지 아닌지를 판별하도록 처리.

• 모바일 여부 판별은 여러 컴포넌트에서 필요한데, 모듈을 불러오면서 재사용할 수 있어서 이 방법이 좋았음

  import { useEffect, useState } from 'react';
  
    const GetIsMobile = () => {
      const [isMobile, setIsMobile] = useState(false);
  
      const mediaMatch = window.matchMedia('(max-width: 800px)');
  
      const mediaHandler = (e: MediaQueryListEvent) => {
        setIsMobile(e.matches);
      };
  
      const addBrowserResizeListener = () => {
        mediaMatch.addEventListener('change', mediaHandler);
      };
      const removeBrowserResizeListner = () => {
        mediaMatch.removeEventListener('change', mediaHandler);
      };
  
      useEffect(() => {
        setIsMobile(mediaMatch.matches);
      }, [mediaMatch.matches]);
  
      useEffect(() => {
        addBrowserResizeListener();
        return () => removeBrowserResizeListner();
      });
  
      return isMobile;
    };
  
    export default GetIsMobile;

배우고 느낀 점

• 다음에 모바일 판별 작업을 한다면 다른 어떤 방법들이 있는지 더 찾아봐야겠다.