Material UI에서 Flexbox를 사용하여 Grid Layout 만들기

소개

Material-UI를 사용하다 보면 Bootstrap과 유사한 그리드 레이아웃을 생성할 수 있는 옵션이 있는지 궁금할 수 있습니다. 이 글에서는 Material-UI에서 그리드 시스템을 구현할 수 있는 다양한 방법과 컴포넌트를 탐색해보겠습니다.

Material-UI 그리드 컴포넌트

Material-UI는 그리드 컴포넌트를 통해 자체 Flexbox 기반 그리드 시스템을 제공합니다. 1.0.0 버전 이후, 그리드 컴포넌트는 핵심 코드에 통합되었습니다. npm을 통해 간단히 설치할 수 있습니다:

npm install @material-ui/core

그리드 컴포넌트는 이제 공식적으로 문서화되어 있으며, 코드 예제와 함께 제공되어 Material-UI 프로젝트에서 그리드 레이아웃을 손쉽게 구현할 수 있습니다.

대체 그리드 컴포넌트 라이브러리

더 가볍고 효율적인 그리드 컴포넌트 라이브러리를 찾는다면, React-Flexbox-Grid를 고려해 볼 수 있습니다. 이 라이브러리는 React에서 flexboxgrid.css를 구현한 것으로, Material-UI와 react-toolbox 둘 다 잘 작동합니다.

또 다른 탐색할 가치 있는 옵션은 react-pure-grid입니다. 이는 React 프로젝트에 간단하고 견고하며 유연하며 매우 사용자 정의 가능한 Bootstrap과 유사한 그리드 시스템을 제공합니다.

반면, Bootstrap의 그리드 시스템을 그대로 사용하면서 Material-UI를 다른 컴포넌트로 사용하고 싶은 경우에는 Bootstrap의 그리드 시스템을 사용자 정의하여 적용할 수 있습니다. http://getbootstrap.com/customize/에서 “그리드 시스템” 옵션만 선택하여 다운로드하면 됩니다. 이렇게 하면 Bootstrap의 그리드 시스템의 이점을 Material-UI와 함께 누릴 수 있습니다.

Flexbox를 이용한 그리드 시스템 생성

Material-UI 컴포넌트만을 사용하여 자체 그리드 시스템을 생성하려면, flexbox와 인라인 스타일링 방식을 활용할 수 있습니다. 다음은 Paper 컴포넌트를 사용하여 화면을 두 개의 수직 컴포넌트로 나누는 예시입니다:

// MuiGrid.js
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

결론

Material-UI는 Grid 컴포넌트를 통해 자체 Flexbox 기반 그리드 시스템을 제공하여 반응형이고 유연한 레이아웃을 생성할 수 있습니다. 그러나 다른 옵션을 선호하는 경우에는 React-Flexbox-Grid와 react-pure-grid와 같은 라이브러리가 추가적인 유연성과 사용자 정의 기능을 제공할 수 있습니다. 또한 Bootstrap의 그리드 시스템과 Material-UI의 그리드 시스템을 조합하여 사용하는 것도 가능합니다. 필요한 파일만 사용자 정의하여 Bootstrap의 그리드 시스템을 Material-UI와 함께 사용할 수 있습니다. 다양한 방법을 실험하고 Material-UI 프로젝트에서 화려한 그리드 레이아웃을 생성하기에 가장 적합한 방법을 선택하세요.

참고 자료 : 

reactjs