[TIL] React에서 Media Query 사용 (TS)

Mdeia Query

미디어 쿼리는 단말기의 화면(Screen) 혹은 유형을 기준으로 특정 너비와 해상도에 따라 스타일을 수정하기 위해 사용되는 CSS기능이다.

즉, 같은 웹 어플리케이션을 다양한 기기의 화면 사이즈에 맞춰 디자인을 해야하는 작업이다.

TypeScript에서 작성

import { CSSProp } from "styled-components";

type MediaQueryProps = {
  [key: string]: number;
};

const breakPoints: MediaQueryProps = {
  md: 800,
  xl: 1200,
};

const mediaQuery = (
  Object.keys(breakPoints) as Array<keyof typeof breakPoints>
).reduce((acc, label) => {
  acc[label] = (style: string) =>
    `@media (max-width: ${breakPoints[label] / 16}em) { ${style} }`;
  return acc;
}, {} as { [key in keyof typeof breakPoints]: (style: string) => CSSProp });

export default mediaQuery;