[Material-UI] 기초(2) - 컴포넌트 레이아웃(Container, Grid)

Material-UI에서 제공하는 컴포넌트의 종류는 도큐먼트들을 다 읽어보기 힘들 정도로 많다.

크게 Layout, Inputs, Navigation, Surfaces, Feedback, Data Display, Utils, Lab로 나눌 수 있고,

세부적으로 다 다루기보다 활용해서 적응할 수 있게끔 대표적인 예시를 들어가며 배우면 좋다.

 

 Layout

 

먼저, 레이아웃에는 Box, Container, Grid, Hidden, Image List가 있다. 

Box는 div를 대체하는 강력하고 편리한 컴포넌트로 tailwind CSS 방식이고

Container는 레이아웃을 잡을 때 좌우 간격, 중앙 위치시킬 때 사용하며

최대 너비 제한 fluid모드와 동일 너비 강제 fixed 모드가 있다.

Grid는 Container 안의 레이아웃을 핸들링해주고 반응형으로 배치시켜야 하는 경우 유용하다.

 

Container

Grid의 breakpoints는 총 5개로 이루어져 있다. xl, lg, md, sm, xs 

import React from 'react';
import { Grid, Box } from "@material-ui/core";
import { Container, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  container: {
    background: theme.palette.warning.main,
  },
}));

export default () => {
  const classes = useStyles();
  return (
    <>
      <Container maxWidth="xl" className={classes.container}>
        <Typography variant="h6" color="primary">
          xl
        </Typography>
      </Container>
      <br />
      
      <Container maxWidth="lg" className={classes.container}>
        <Typography variant="h6" color="primary">
          lg
        </Typography>
      </Container>
      <br />
      
      <Container maxWidth="md" className={classes.container}>
        <Typography variant="h6" color="primary">
          md
        </Typography>
      </Container>
      <br />
      
      <Container maxWidth="sm" className={classes.container}>
        <Typography variant="h6" color="primary">
          sm
        </Typography>
      </Container>
      <br />
      
      <Container maxWidth="xs" className={classes.container}>
        <Typography variant="h6" color="primary">
          xs
        </Typography>
      </Container>
    </>
  );
}

 

그리고 fluid와 fixed모드로 나눌 수 있는데, fluid 모드는 fixed를 생략하면되고 fixed는 Container에 넣어주면 된다.

<Container fixed maxWidth="xl" className={classes.container}>
  <Typography variant="h6" color="primary">
    xl
  </Typography>
</Container>

<Container maxWidth="lg" className={classes.container}>
  <Typography variant="h6" color="primary">
    lg
  </Typography>
</Container>

 

fluid는 유동적으로 브라우저의 크기에 맞게 줄어들지만,

fixed는 해당 사이즈보다 브라우저 크기가 작아지면 xl->lg->md->sm->xs 순으로 줄어들게 된다.

 

Grid 

Material UI는 12열 격자(grid)로 이루어져 있고 각 브레이크포인트(breakpoint) 별로 각 셀이 몇 열을 차지할 것인지 정할 수 있다.

import React from 'react';
import { Grid, Box } from "@material-ui/core";

export default () => {
  return (
    <>
      <Grid container spacing={1}>
        <Grid item xs={12}>
          <Box bgcolor="primary.main" color="info.contrastText" p={2}>
            1
          </Box>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Box bgcolor="warning.main" color="info.contrastText" p={2}>
            2
          </Box>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Box bgcolor="warning.main" color="info.contrastText" p={2}>
            3
          </Box>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Box bgcolor="error.main" color="info.contrastText" p={2}>
            4
          </Box>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Box bgcolor="error.main" color="info.contrastText" p={2}>
            5
          </Box>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Box bgcolor="error.main" color="info.contrastText" p={2}>
            6
          </Box>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Box bgcolor="error.main" color="info.contrastText" p={2}>
            7
          </Box>
        </Grid>
      </Grid>
    </>
  );
}

브라우저의 크기가 줄어들면 아래와 같이 변경된다.

복수로 breakpoints를 지정해두면 브라우저 크기가 줄어들면 지정된 크기로 변화한다.

 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox

참고로 flexbox는 위의 사이트에서 확인하면 쉽게 알아볼 수 있다.