Breakpoints

Breakpoints (브레이크포인트)

다양한 맥락에서 브레이크포인트를 사용할 수 있게 해주는 API예요. 화면 너비에 따라 레이아웃이 자연스럽게 적응하도록 만들어 주는 핵심 개념이죠.

출처: 문서

본문

최적의 사용자 경험을 위해서는 Material Design 인터페이스가 다양한 브레이크포인트에서 레이아웃을 적응시킬 수 있어야 해요. Material UI는 원래 specification의 단순화된 구현을 사용해요.

브레이크포인트는 다양한 컴포넌트가 반응형으로 동작하도록 내부적으로 사용되고 있어요. 하지만 여러분도 Grid 컴포넌트를 통해 애플리케이션의 레이아웃을 제어하는 데 활용할 수 있어요.

기본 브레이크포인트

각 브레이크포인트(키)는 고정된 화면 너비(값)와 매칭돼요:

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

이 값들은 사용자 정의할 수 있어요.

CSS 미디어 쿼리

CSS 미디어 쿼리는 UI를 반응형으로 만드는 가장 관용적인 방식이에요. 테마는 이를 위한 다섯 가지 스타일 헬퍼를 제공해요:

• theme.breakpoints.up(key)
• theme.breakpoints.down(key)
• theme.breakpoints.only(key)
• theme.breakpoints.not(key)
• theme.breakpoints.between(start, end)

다음 데모에서는 화면 너비에 따라 배경색(빨강, 파랑 & 초록)을 바꿔 봐요.

const styles = (theme) => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { red, green, blue } from '@mui/material/colors';

const Root = styled('div')(({ theme }) => ({
  padding: theme.spacing(1),
  [theme.breakpoints.down('md')]: {
    backgroundColor: red[500],
  },
  [theme.breakpoints.up('md')]: {
    backgroundColor: blue[500],
  },
  [theme.breakpoints.up('lg')]: {
    backgroundColor: green[500],
  },
}));

export default function MediaQuery() {
  return (
    <Root>
      <Typography>down(md): red</Typography>
      <Typography>up(md): blue</Typography>
      <Typography>up(lg): green</Typography>
    </Root>
  );
}

JavaScript 미디어 쿼리

때로는 CSS만으로 충분하지 않을 때가 있어요. 브레이크포인트 값에 따라 JavaScript로 React 렌더링 트리를 바꾸고 싶을 수도 있거든요.

useMediaQuery 훅

자세한 내용은 useMediaQuery 페이지에서 확인할 수 있어요.

커스텀 브레이크포인트

프로젝트의 브레이크포인트는 테마의 theme.breakpoints 섹션에서 정의해요.

• theme.breakpoints.values: 기본값은 위 값들과 같아요. 키는 화면 이름이고, 값은 해당 브레이크포인트가 시작되는 최소 너비(min-width)예요.
• theme.breakpoints.unit: 기본값은 'px'예요. 브레이크포인트 값에 사용되는 단위예요.
• theme.breakpoints.step: 기본값은 5예요. 배타적(exclusive) 브레이크포인트를 구현할 때 100으로 나눠 증가시키는 값이에요. 예를 들어 { step: 5 }는 down(500)이 '(max-width: 499.95px)'가 된다는 뜻이에요.

기본 브레이크포인트의 값을 바꿀 때는 모두 제공해 줘야 해요:

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
});

브레이크포인트는 프로젝트 취향에 맞게 이름을 지어서, 원하는 만큼 적게 또는 많이 가질 수 있어요.

const theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 640,
      laptop: 1024,
      desktop: 1200,
    },
  },
});

TypeScript를 사용한다면, 위 값들을 테마가 받아들이도록 module augmentation을 사용해야 해요.

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true; // adds the `mobile` breakpoint
    tablet: true;
    laptop: true;
    desktop: true;
  }
}

API

theme.breakpoints.up(key) => media query

인자

1. key (string | number): 브레이크포인트 키(xs, sm 등) 또는 px 단위의 화면 너비 숫자예요.

반환값

media query: 대부분의 스타일링 솔루션에서 바로 사용할 수 있는 미디어 쿼리 문자열이에요. 브레이크포인트 키가 주는 화면 크기보다 크거나 같은(포함) 화면 너비와 매칭돼요.

예시

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [md, ∞)
    //       [900px, ∞)
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.down(key) => media query

인자

1. key (string | number): 브레이크포인트 키(xs, sm 등) 또는 px 단위의 화면 너비 숫자예요.

반환값

media query: 대부분의 스타일링 솔루션에서 바로 사용할 수 있는 미디어 쿼리 문자열이에요. 브레이크포인트 키가 주는 화면 크기보다 작은(배타적) 화면 너비와 매칭돼요.

예시

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [0, md)
    //       [0, 900px)
    [theme.breakpoints.down('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.only(key) => media query

인자

1. key (string): 브레이크포인트 키(xs, sm 등)예요.

반환값

media query: 대부분의 스타일링 솔루션에서 바로 사용할 수 있는 미디어 쿼리 문자열이에요. 브레이크포인트 키가 주는 화면 크기에서 시작(포함)해서 다음 브레이크포인트 키가 주는 화면 크기에서 멈추는(배타적) 화면 너비와 매칭돼요.

예시

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [md, md + 1)
    //       [md, lg)
    //       [900px, 1200px)
    [theme.breakpoints.only('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.not(key) => media query

인자

1. key (string): 브레이크포인트 키(xs, sm 등)예요.

반환값

media query: 대부분의 스타일링 솔루션에서 바로 사용할 수 있는 미디어 쿼리 문자열이에요. 브레이크포인트 키가 주는 화면 크기에서 멈추고(배타적), 다음 브레이크포인트 키가 주는 화면 크기에서 시작하는(포함) 화면 너비와 매칭돼요.

예시

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [xs, md) and [md + 1, ∞)
    //       [xs, md) and [lg, ∞)
    //       [0px, 900px) and [1200px, ∞)
    [theme.breakpoints.not('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.between(start, end) => media query

인자

1. start (string): 브레이크포인트 키(xs, sm 등) 또는 px 단위의 화면 너비 숫자예요.
2. end (string): 브레이크포인트 키(xs, sm 등) 또는 px 단위의 화면 너비 숫자예요.

반환값

media query: 대부분의 스타일링 솔루션에서 바로 사용할 수 있는 미디어 쿼리 문자열이에요. 첫 번째 인자의 브레이크포인트 키가 주는 화면 크기보다 크거나 같고(포함), 두 번째 인자의 브레이크포인트 키가 주는 화면 크기보다 작은(배타적) 화면 너비와 매칭돼요.

예시

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [sm, md)
    //       [600px, 900px)
    [theme.breakpoints.between('sm', 'md')]: {
      backgroundColor: 'red',
    },
  },
});

기본값

브레이크포인트의 기본값은 테마 탐색기를 사용하거나, 이 페이지의 개발자 도구 콘솔(window.theme.breakpoints)을 열어서 확인할 수 있어요.

더 알아보기 (Learn more)