useBreakpoint Hook

useBreakpoint

• Ant Design의 Grid 안에는 useBreakpoint 훅이 들어있다.
• useBreakpoint Hook 안에 다시 xs, sm, md, lg, xl, xxl로 브레이크 포인트가 지정되어 있어서 Hook을 통해 간단하게 브라우저 사이즈에 따른 레이아웃 옵션을 줄 수 있다.

사용하기

1. Grid import 하기
2. useBreakpoint 변수에 집어넣기
3. 크기도 변수에 집어넣기 (ex. lg, xs, sm...)

copyimport { Grid, Tag } from 'antd';
const { useBreakpoint } = Grid;

const Component = () => {
  const {lg} = useBreakpoint();
  const myFontSize = lg ? '36px' : '24px';
  return (
    <Text type={"secondary"} style={% raw %}{{fontSize: myFontSize}}{% endraw %}>Message to {userName}</Text>
  )
}

Sider를 숨기면 토글 버튼이 자동 추가!

• Sider의 collapsedWidth 옵션이 있다.
• 이 옵션의 넓이를 0으로 설정해주면 Sider가 보이지 않게 되고 다시 보이게 하는 토글 버튼이 생긴다.
• 이 토글 버튼을 숨기고 싶다면 trigger="null"이라는 옵션을 주면 사라짐!

Reference

• https://ant.design/components/layout/#Layout.Sider
• https://ant.design/components/grid/#components-grid-demo-useBreakpoint