TIL 23.09.07 Tailwind CSS 로 반응형 구현하기/ 커스텀 hook

오늘은 반응형 UI를 구현했다. Tailwind CSS 진짜 styled-components 에 비해 훨씬 좋고 훨씬 간편하다.

왜 이렇게 좋은걸 몰랐을까? .. next.js 를 배우니까 tailwind 도 알게되고 여러가지 스킬을 쌓을 수 있어서 너무 좋은 것 같다.

 

Tailwind CSS 로 반응형 구현하기

 

일단 tailwind 는 다른것과 달리 @media 어쩌구 저쩌구를 쓰지 않아도 된다. 또한 className이 곧 css 기 때문에 따로 지정하지 않아도 되는 엄청난 장점이 있다. 이걸 몰랐을 땐 보기 지저분하고 그랬는데 반응형을 하고나서야 빛을 발하는... 

 

다음과 같은 className 이 있다고 하자.

className="h-[120px] xl:h-[158px] bg-[#5FD100] flex relative items-center justify-between w-full  rounded-2xl sm:p-8 p-4 mb-16 cursor-pointer"

 

tailwind css 해석

 

h-[120px] : 높이 120px, (특정 픽셀, 색상을 주고싶으면 이처럼 대괄호를 열어서 주자)

xl:h-[158px] : xl(1280px) 이상에서만 높이 158px, 적용

bg-[색상코드] : 배경색

flex : display: flex

relative: position: relative

items-center : items-align: center

justify-between: justify-content: space-between

w-full : width: full

rounded-2xl: border-round: 16px , 8px 씩 늘어간다고 생각하면 된다. 예) 3xl, 24px

sm:p-8 : sm(640px) 이상일때, p-8 (32px) 1 당 4px 로 생각하면 된다.

p-4: 640px 미만일때, p-4 (16px)

mb-16: margin-bottom: 64px

cursor-pointer: cursor: pointer

 

 

미디어 쿼리 클래스 픽셀 범위

xs	0px
sm	640px
md	768px 모바일에서 많이 씀
lg	1024px
xl	1280px pc 에서 반응형으로 넘어가는 그 어딘가..
2xl	1536px

 

보통 lg 를 주고 sm 을 주면, lg 와 sm 의 사이는 sm 이 적용되고, lg 이상은 lg 가 적용되는 시스템이다. 그렇게 되면 아무것도 지정해주지 않은 요소는 sm 아래의 화면너비에서 적용이된다. 

 

---

커스텀 훅으로 간편하게 반응형 구현하기

 

보통 반응형을 구현할 때, 필요하지 않은 요소는 제거하게 된다. 매번 그요소에 대해서 state 를 걸어가며 만들면 얼마나 귀찮을까..

다행히 같은 조원분께서 커스텀훅을 만들어주셔서 간편하게 구현했다.

 

import { useMediaQuery } from "react-responsive";

 

나는 모바일 반응형 sm 기준으로 사이즈가 필요해서 max-width 값을 다음처럼 지정해주었다.

 

export const useIsMobileSm = () => {
  const [isMobileSm, setIsMobileSm] = useState(false);
  const mobile = useMediaQuery({ query: "(max-width: 640px" });
  useEffect(() => {
    setIsMobileSm(mobile);
  }, [mobile]);

  return isMobileSm;

 

사용예시)

 

사용하고자 하는 컴포넌트에 다음처럼 불러와준다.

 

  const isMobileSm = useIsMobileSm();

 

이후 모바일사이즈가 아닐 때 (너비가 640px 보다 큰 경우) => 일일미션 랜덤 뽑기가 나옴.

그것보다 작은 경우 => 일일미션 <br/> 랜덤뽑기가 나옴.

 

       {!isMobileSm ? (
            <span className="font-semibold text-white text-[20px]">
              일일미션 랜덤 뽑기
            </span>
          ) : (
            <span className="font-semibold text-white text-[17px]">
              일일미션
              <br />
              랜덤 뽑기
            </span>
          )}

 

결과