React에서 Media Query 작성하는 편: styled-components [JS와 TS]

외울 수 없기에 내가 보려고 작성한닷!!!🐣

Media Query란?

반응형 디자인을 할 때 사용되는 스타일 기능이다.
즉, 디바이스(전자기기)별로 달라지는 화면의 크기를 조정할 때 사용되는 CSS이다.

CSS에서 사용되는 예시 코드는 다음과 같다.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

화면에 비율에 대체적인 표준은 아래의 표와 같다.

---

1) JavaScript에서 Media Query 작성하기

import { css } from 'styled-components';

const sizes = {
    mobile: 580,
    tablet: 768,
    desktop: 1024
};

export const media = Object.keys(sizes).reduce((acc, label) => {
    acc[label] = (...args) => css`
      @media (max-width: ${sizes[label] / 16}em) {
        ${css(...args)};
      }
    `;
  
    return acc;
}, {});

const Box = styled.div`
  /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */
  background: ${props => props.color || 'blue'};
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
  ${media.desktop`width: 768px;`}
  ${media.tablet`width: 768px;`};
`;

---

2) TypeScript에서 Media Query 작성하기

type MediaQueryProps = {
    mobile: number;
    tablet: number;
    desktop: number;
};

const sizes:MediaQueryProps = {
    mobile: 580,
    tablet: 768,
    desktop: 1024
};

export const media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce(
    (acc, label) => {
      acc[label] = (style: String) =>
        `@media (max-width: ${sizes[label]/ 16}em) { ${style} }`;
      return acc;
    },
    {} as { [index: string]: Function }
);

ESLint 적용 시 타입에 대한 오류가 난다. 그 때 밑에 코드를 이용하여 작성하면 된당!

import { CSSProp } from 'styled-components';

type MediaQueryProps = {
    mobile: number;
    tablet: number;
    desktop: number;
};

const sizes:MediaQueryProps = {
    mobile: 580,
    tablet: 768,
    desktop: 1024
};

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

---

출처) Media Queries in Styled Components - Typescript
출처) DRY media queries - styled-components + typescript
출처) 다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components