React와 Media Query: window.matchMedia를 활용한 반응형 스타일링

AI img for javascript

window.matchMedia를 활용하여 React에서의 반응형 웹 구현을 위한 코드입니다.

import { useEffect, useState } from 'react';

export default function Home() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 768px)');
    const handleChange = () => setIsMobile(mediaQuery.matches);

    mediaQuery.addEventListener('change', handleChange);
    setIsMobile(mediaQuery.matches);

    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  return (
    <div style={{ backgroundColor: isMobile ? 'lightcoral' : 'lightblue' }}>
      {isMobile ? 'Mobile View' : 'Desktop View'}
    </div>
  );
}

 

 

반응형

---

코드 풀이

1. State로 반응형 상태 관리

const [isMobile, setIsMobile] = useState(false);

• isMobile은 현재 화면 크기가 모바일(max-width: 768px)인지 여부를 나타내는 상태입니다.
• useState(false)로 기본값을 설정합니다.

2. Media Query 생성

const mediaQuery = window.matchMedia('(max-width: 768px)');

• window.matchMedia를 사용하여 특정 화면 크기 조건(max-width: 768px)을 정의합니다.
• 반환값은 MediaQueryList 객체로, 현재 조건 일치 여부를 matches 속성을 통해 확인할 수 있습니다.

3. 이벤트 리스너 등록

mediaQuery.addEventListener('change', handleChange);

• MediaQueryList 객체는 change 이벤트를 통해 조건 변경을 감지할 수 있습니다.
• handleChange 함수는 조건이 변경될 때 호출되어 isMobile 상태를 업데이트합니다.

4. 초기 상태 설정

setIsMobile(mediaQuery.matches);

• 컴포넌트가 처음 렌더링될 때, 현재 화면 크기에 따라 isMobile 상태를 초기화합니다.

5. 이벤트 리스너 정리

return () => mediaQuery.removeEventListener('change', handleChange);

• 컴포넌트가 언마운트되면 이벤트 리스너를 제거하여 메모리 누수를 방지합니다.

---

실행 결과

이 컴포넌트를 실행하면 화면 크기에 따라 배경색과 텍스트가 동적으로 변경됩니다.

• Desktop View
  배경색: lightblue
  텍스트: "Desktop View"
• Mobile View
  배경색: lightcoral
  텍스트: "Mobile View"

---

왜 window.matchMedia를 사용할까?

CSS에서 Media Query를 직접 사용할 수도 있지만, JavaScript를 사용하면 화면 크기를 조건으로 더 복잡한 로직을 구현할 수 있습니다. 이 방법은 아래와 같은 상황에서 유용합니다.

1. 상태 기반 로직 추가
   화면 크기에 따라 비동기 데이터 로드, 컴포넌트 렌더링 여부 등을 제어할 수 있습니다.
2. CSS-in-JS와 결합
   JavaScript와 함께 스타일링 라이브러리(Styled-components, Emotion 등)를 사용하는 경우, 조건부 스타일링이 유연해집니다.

---

주의할 점

호환성

• addEventListener는 최신 브라우저에서만 지원됩니다. 구형 브라우저에서는 mediaQuery.addListener를 사용해야 할 수도 있습니다.

 

mediaQuery.addListener(handleChange); return () => mediaQuery.removeListener(handleChange);

 

성능

• 이벤트 리스너를 남용하면 성능 이슈가 발생할 수 있으므로, 꼭 필요한 곳에서만 사용하고 반드시 정리(cleanup) 코드를 추가하세요.

---

결론

window.matchMedia를 활용하면 React에서 Media Query를 보다 동적으로 사용할 수 있습니다. 화면 크기 변화에 따라 상태를 업데이트하고, 이를 기반으로 컴포넌트의 UI나 로직을 조정할 수 있습니다. 반응형 디자인이 요구되는 프로젝트에서 이 접근법을 활용해 보세요! 😊