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(med..
React와 Media Query: window.matchMedia를 활용한 반응형 스타일링
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(med..
2024.12.28
