반응형 WEB/Next.js1 Next.js + mobile responsive [react-responsive] # Responsive web 리액트를 가지고 개발하면서 여러 기기의 디바이스 사이즈에 대응하여 반응형 웹 페이지를 만드는 방법에는 여러 가지가 있지만, css media query 말고 js 단에서 반응형 다이나믹 스타일을 구현하고 싶다면 대표적으로 react-responsive 라는 라이브러리가 있다. react-responsive 에서 대표적으로 제공하는 훅인 useMediaQuery 가 있는데, 사용 예시는 다음과 같다. const isMobile = useMediaQuery({ query: "(max-width: 767px)"}); // true or false 컴포넌트 내부에서 해당 훅을 호출하여, 위와 비슷한 방식으로 디바이스 종류를 나누어 스타일을 대응시키면 되는데, 보통의 SPA(sing.. 2021. 10. 12. 이전 1 다음 반응형
