반응형 웹을 개발할 때 CSS만으로는 해결되지 않는 순간이 있다. 예를 들어 모바일에서는 '모달'을 띄우고 데스크톱에서는 '드롭다운'을 띄워야 한다면? window.matchMedia API를 활용해 자바스크립트 단에서 화면 크기를 감지하고, React 커스텀 훅으로 우아하게 구현하는 실무 테크닉을 정리한다. CSS 미디어 쿼리를 자바스크립트에서 제어하는 방법: window.matchMedia와 React 커스텀 훅 활용보통 반응형 스타일링은 CSS의 @media 쿼리나 TailwindCSS의 md:, lg: 클래스로 처리한다. 하지만 개발을 하다 보면 "화면 크기에 따라 스타일이 아니라, 기능(로직) 자체가 달라져야 하는 경우"가 반드시 생긴다.이때 브라우저 창 크기를 resize 이벤트로 감지하는 ..
