Logo

Material UI의 Container, Grid 컴포넌트

웹페이지의 레이아웃을 잡을 때 컨텐츠를 화면 중앙에 위치시키기나 격자로 배치해야 할 때가 많이 있습니다. Material UI의 <Container/>와 <Grid/> 컴포넌트를 사용하면 이러한 웹페이지 레이아웃을 매우 쉽고 간단하게 잡을 수 있습니다.

Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다.

Container 컴포넌트

<Container/> 컴포넌트는 컨텐츠를 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬 때 사용합니다. 최대 너비만을 제한하는 fluid 모드와 항상 동일한 너비를 강제하는 fixed 모드를 지원합니다.

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

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

export default () => {
  const classes = useStyles();

  return (
    <>
      <Container maxWidth="sm" className={classes.container}>
        <Typography variant="h6" color="primary">
          Fluid
        </Typography>
      </Container>

      <br />

      <Container fixed maxWidth="xs" className={classes.container}>
        <Typography variant="h6" color="secondary">
          Fixed
        </Typography>
      </Container>
    </>
  );
};

위 예제 코드에서 보이는 것과 같이 사용법은 매우 간단합니다. 화면 중앙에 위치해야하는 모든 컴포넌트를 통째로 <Container/> 컴포넌트로 감싸주면 됩니다.

Grid 컴포넌트

<Grid/> 컴포넌트는 <Container/> 컴포넌트처럼 레이아웃을 잡을 때 필수적으로 사용되지는 않지만 컨텐츠를 반응형 격자로 배치시켜야 하는 경우 유용합니다. Material UI는 기본적으로 12열 격자(grid) 시스템을 가지고 있으며, 각 브레이크포인트(breakpoint) 별로 각 셀이 몇 열을 차지할 것인지를 명시해줄 수 있습니다.

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

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

위 예제 코드처럼 하나의 <Grid container> 안 에 여러 개의 <Grid item/>을 위치시키면 됩니다.

전체 코드

본 포스팅에서 작성한 코드는 아래에서 확인하실 수 있습니다.

마치면서

이상으로 Material UI의 <Container/>과 <Grid/> 컴포넌트 컴포넌트를 어떻게 사용하는지 간단하게 살펴보았습니다.

This work is licensed under CC BY 4.0

messageCircle