[React] React DeviceType 구분하기

관련 링크

• react-responsive - npm
  https://www.npmjs.com/package/react-responsive

설명

• React 에서 Pc, Tablet, Mobile 과 같이 현재 장치의 종류를 구분할때 사용하는 방법
• 코드상에서는 react-responsive을 이용해 만들어둔 hook을 이용하여 상태를 조절
• css상에서 @media를 이용하여 구별
  상태값을 이용한다면 최상위 루트(App.tsx)에서 현재 상태를 전달하고 컴포넌트 들은 구독하여 사용하는 방식을 사용한다.

사용법

//useDeviceType.tsx
import { useMediaQuery } from 'react-responsive';

export const useResponsive = () => {
  const isDesktop = useMediaQuery({
    query: '(min-width: 1440px)',
  });
  const isTablet = useMediaQuery({
    query: '(min-width:768px) and (max-width:1439px)',
  });
  const isMobile = useMediaQuery({
    query: '(max-width: 767px)',
  });

  return { isDesktop: isDesktop, isTablet: isTablet, isMobile: isMobile };
};

//global.tsx
//PC 접속일때만
@media (hover: hover) and (pointer: fine) {
}

//모바일 기기로 접속일때
@media (hover: none) and (pointer: coarse) {
}