[Styled-components] 미디어 쿼리 쉽게 쓰기

반응형 웹 구현에 대한 방법은 여러 가지가 있다.

그 중에서도 무난하면서 비용이 적게 드는 방법은 바로 미디어 쿼리를 활용하는 방법이다.

 

미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN

스타일 시트 내에서 선언되어 사용되기 때문에 별도의 js실행 없이도 구현이 가능하다는 장점이 있다.

 

특히나 서버사이드 렌더링으로 구현하는 페이지의 경우 이 장점이 더욱 빛난다.

노드 서버에서 window 객체를 얻을 수 없기 때문에 클라이언트의 창 크기를 추론하기 어렵고, 때문에 CSS적으로 반응형 처리를 하는 것이 여러모로 편하다.

 

미디어 쿼리 안에도 여러 문법이 있지만 일반적으로는 창 크기에 대응하는 다음과 같은 문법이 주로 사용된다.

@media (max-width: 12450px) { ... }

문제는 이렇게 매번 CSS에 치려다 보니 관리가 좀 귀찮은 부분이 있다.

 

필자는 이 문제를 개선하기 위해 여기저기 찾아본 후, 나만의 미디어 쿼리 함수를 만들어서 사용 및 관리 중인데 개인적으로 매우 편하여 공유하려 한다.

 

mediaQuery.ts

export const BREAKPOINT_PC = "pc";
export const BREAKPOINT_TABLET = "tablet";
export const BREAKPOINT_PHONE_MEDIUM = "phoneMedium";
export const BREAKPOINT_PHONE_SMALL = "phoneSmall";

export const breakpoints = {
  pc: 1279,
  tablet: 767,
  phoneMedium: 359,
  phoneSmall: 325,
};

export const mediaQueries = (key: keyof typeof breakpoints) => {
  return `@media (max-width: ${breakpoints[key]}px)`;
};

/**
  미디어쿼리 사용방법 -> customStyled component 내에서 호출

 ex)

 ${mediaQueries(BREAKPOINT_TABLET)} {
    ${(props) => (props.theme.width )};
  }

 * */

한 파일에서 각 크기별 BreakPoint 까지 관리가 가능해서 만족스럽게 쓰고 있다.

기존 미디어 쿼리를 함수 형태로 변경하고 키 값을 한정하다 보니, 자동 완성도 쉬워서 아래와 같이 사용한다.