헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용

 

 

TailwindCss로 반응형 헤더 만들기

 

내 목표는 교수님 명함에

TailwindCss로 반응형 헤더 만들기

 

 

내 목표는 교수님 명함에 우리 홈페이지 URL이 들어간 QR 코드를 만들어드리는 것이 목표이다.

그러기 위해서는 접근성이 좋은 모바일 버전의 웹 UI가 필수이다.

반응형으로 만드는것은 꼭 필요한 일이지만 동시에 매우 귀찮은 일이긴 하다.

그 중에서 헤더는 반응형이라기 보다는 적응형 웹 개발에 어울리다는 말이 맞는것 같다.

 

PC 버전에서의 헤더는 메뉴들이 일자로 나열되어 있는 경우들이 많다. 화면이 그만큼 여유롭게 크기 때문이다.

하지만 모바일 버전은 대부분 햄버거 모양의 이모티콘을 사용한다.

PC 버전에서의 헤더 메뉴와 모바일 버전의 헤더 메뉴

 

만드는 과정을 포스팅 해보고자 한다.

 

 

 

React 화면 크기 감지 - resize 이벤트

 

resize 이벤트는 화면의 크기가 변경될 때 발생된다.

useEffect를 이용해 state에 화면 크기가 저장되도록 만든다.

const [width, setWidth] = useState(window.innerWidth);

const handleResize = () => {
  setWidth(window.innerWidth);
};

useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => {
  
    window.removeEventListener("resize", handleResize);
  };
}, []);

useState를 통해 값을 계속해서 할당시킬 수 있고, width에 너비가 저장이 된다.

 

 

Breaking Point는 1024px로 맞추었다.

TailwindCss에서 반응형 웹을 쉽게 만들기 위해 임의로 breaking point를 만들어놓았다.

tailwind breakpoint prefix

 

'lg' 사이즈의 픽셀이 1024px 이다. 

예외 기기가 있을 수 있지만 대부분의 기기에서는 PC 버전의 가장 작은 사이즈는 1180px, 태블릿 버전에서는 981px 이라고 한다.

 

1024px은 그 기준이 될 수 있을것 같다.

그래서 1024px 이상은 PC 버전의 UI, 그 이하는 모바일 버전의 UI로 헤더에 햄버거 이모티콘을 사용할 것이다.

기기별 픽셀 크기 비교

 

 

const [width, setWidth] = useState(window.innerWidth);
const [isLarge, setIsLarge] = useState(Boolean);

const handleResize = () => {
  setWidth(window.innerWidth);
};

useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => {

    window.removeEventListener("resize", handleResize);
  };
}, []);
useEffect(() => {
  if (width >= 1024) {
    setIsLarge(true);
  } else {
    setIsLarge(false);
  }
}, [width]);

 

내 전체 코드는 이렇다.

하나의 useState를 만들어 1024px보다 큰 화면인지의 유무를 확인하는 불린값을 가진 isLarge state를 만든 후 이를 html 및 react 코드 내에 넣을 예정이다.

 

 

{isLarge ? (
        <div>
			
        </div>
      ) : (
        <div>
			
        </div>
)}

 

위의 div 태그 안에는 PC 버전의 UI가 담긴 코드들을 넣을 것이고, 아래 div 태그에는 모바일 버전의 코드를 넣을 것이다.

이렇게 된다면 1024px을 기준으로 헤더가 바뀌게 된다.

잘 작동되는 것을 아래 사진을 통해 확인할 수 있다.

반응형으로 잘 작동되는 헤더

 

 

자세한 코드는 내 깃헙에서 확인할 수 있다.

https://github.com/dev-junseo/LAB_webpage/blob/main/lab-webpage/src/components/layout/Header.tsx

LAB_webpage/lab-webpage/src/components/layout/Header.tsx at main · dev-junseo/LAB_webpage