[React] useMediaQuery로 디바이스별 반응형 웹 만들기

 

 

React에서 반응형 웹을 구현해보자.

최근 웹 개발에서는 다양한 장치와 화면 크기에 맞게 콘텐츠를 최적화하는 것이 중요하다.

 

보통은 모바일, 태블릿, 데스크탑만 하는데

나는 좀 더 디테일한 구현을 해보고 싶었다. 

 

케이스 최소 너비 (minWidth), 최대 너비 (maxWidth), 방향 (Orientation)

해당 케이스별 변수 범위다.

isMobilePort	~	479px	세로 (Portrait)
isMobileLand	~	767px	가로 (Landscape)
isTabletPort	480px	1023px	세로 (Portrait)
isTabletLand	768px	1023px	가로 (Landscape)
isDesktop	1024px	~	-

 

export const DeviceSize = {
    DESKTOP_MIN_WIDTH: 1024,

    TABLET_LANDSCAPE_MIN_WIDTH: 768,
    TABLET_LANDSCAPE_MAX_WIDTH: 1023,

    MOBILE_TABLET_PORTRAIT_MIN_WIDTH: 480,
    MOBILE_TABLET_PORTRAIT_MAX_WIDTH: 767,
};

 

아래의 값을 만들고, 

케이스를 나눴다. 

 

const isMobilePort = useMediaQuery({
        maxWidth: ResponsiveConstants.DeviceSize.MOBILE_TABLET_PORTRAIT_MIN_WIDTH,
        orientation: 'portrait'
    });
    const isMobileLand = useMediaQuery({
        maxWidth: ResponsiveConstants.DeviceSize.MOBILE_TABLET_PORTRAIT_MAX_WIDTH,
        orientation: 'landscape'
    });
    const isTabletPort = useMediaQuery({
        minWidth: ResponsiveConstants.DeviceSize.MOBILE_TABLET_PORTRAIT_MIN_WIDTH,
        maxWidth: ResponsiveConstants.DeviceSize.TABLET_LANDSCAPE_MAX_WIDTH,
        orientation: 'portrait'
    });
    const isTabletLand = useMediaQuery({
        minWidth: ResponsiveConstants.DeviceSize.MOBILE_TABLET_PORTRAIT_MIN_WIDTH,
        maxWidth: ResponsiveConstants.DeviceSize.TABLET_LANDSCAPE_MAX_WIDTH,
        orientation: 'landscape'
    });

 

 

if (isMobilePort)... 등으로 사용하면 된다. 

 

 

f12 사이즈를 조절해보자.

 

잘 되는 걸 볼 수 있다