[React] isMobile - 모바일 화면사이즈인지 판별하는 custom hook 만들어 쓰기

니즈

- 해당 화면을 모바일 화면크기로 보고있는지 앱 전체에서 알 필요X.. 일부 컴포넌트에서만(=부분적으로) 필요했음

- 무슨 디바이스로 접속했는지 등의 자세한 정보는 필요하지 않았음

- '모바일' 또는 '모바일아님' 이렇게 두 가지 상태로만 나뉘는 간단한 반응형 웹이었음

 

뭐 대단한 걸 요구하는 게 아니었기 때문에..

react-responsive와 같은 외부 모듈을 가져다 쓰는 것 보다는 간단한 custom hook을 만들어 쓰기로 했다.

 

 

커스텀 훅 만들기

// useMobile.ts

import { useState, useEffect } from 'react'
import { mobileSize } from 'src/styles/theme'

const useMobile = () => {
  const [isMobile, setIsMobile] = useState<boolean>(false)

  useEffect(() => {
    const init = () => {
      if (mobileSize > window.innerWidth) {
        setIsMobile(true)
      } else {
        setIsMobile(false)
      }
    }
    init()
    window.addEventListener('resize', init)
    return () => window.removeEventListener('resize', init)
  }, [])

  return { isMobile }
}

export default useMobile

 

 

사용을 원하는 컴포넌트

import useMobile from 'src/hooks/useMobile'

...

const { isMobile } = useMobile();
console.log(isMobile);

 

 

 

 

 

참고문서

https://velog.io/@greyzero/media-query%EC%99%80-react-custom-hook-%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%B4%EC%84%9C-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9E%91%EC%97%85%ED%95%98%EA%B8%B0