반응형 디자인에 사용되는 useMediaQuery와 @media

화면 너비에 따라 반응형 디자인을 위해 useMediaQuery과 @media가 자주 사용되는데, 각각 사용 환경과 방식이 다르다.

 

 

@media

@media는 주로 css 파일이나 <style> 태그 내부에서 사용하는 반응형 스타일링 방법으로 css 파일에 직접 작성해 특정 화면 크기에 따라 스타일을 적용할 수 있다.

html이나 js 파일을 수정하지 않고도 반응형 디자인을 적용할 수 있다는 것이 장점이다

.box {
  width: 100%;
  background-color: blue;
}

/* 화면 너비가 768px 이하일 때 스타일 변경 */
@media (max-width: 768px) {
  .box {
    background-color: red;
  }
}

 

@media 설정으로 .box의 배경색은 기본적으로 파란색이지만 화면 너비가 768px 이하가 되면 빨간색으로 바뀌게 된다.

 

 

 

useMediaQuery

useMediaQuery는 react-responsive 라이브러리에서 제공한다.

 

css가 아니라 react에서 반응형으로 처리할 때 사용할 수 있는 훅으로, 화면 크기에 따라 css 뿐만 아니라 동적으로 컴포넌트 구조 변경도 가능하다.

import { useMediaQuery } from 'react-responsive';

const MyComponent = () => {
  const isMobile = useMediaQuery({ maxWidth: 768 });

  return (
    <div style={{ backgroundColor: isMobile ? 'red' : 'blue', padding: '20px' }}>
      {isMobile ? '모바일 화면' : '데스크톱 화면'}
    </div>
  );
};

768px을 기준으로 현재 화면이 모바일인지 데스크톱인지 구분하여 모바일 화면일 때는 빨간색 배경을 데스크톱 화면일 때는 파란색 배경을 지정할 수 있다.

 

isMobile에는 boolean 값이 저장되므로 이 변수를 활용하여 UI 구성도 다르게 설정할 수 있는 것이다.

 

 

 

 

단순히 css 스타일만 변경하여 반응형 스타일링이 필요하다면 @media를, 화면 크기에 따라 다른 UI가 필요하다면 useMediaQuery를 사용하는 것이 더 적합하다.