[MUI] MUI 예제: 2. 레이아웃

MUI 예제: 2. 레이아웃

MUI는 강력한 레이아웃 시스템을 제공합니다.

Grid

반응형 레이아웃을 위한 12컬럼 그리드 시스템입니다. xs, sm, md, lg, xl prop을 사용하여 breakpoint에 따른 컬럼 수를 지정할 수 있습니다.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={2}>
        {/* 화면이 medium 사이즈 이상일 때 4칸, 아닐 때는 8칸 */}
        <Grid item xs={8} md={4}>
          <Item>xs=8 md=4</Item>
        </Grid>
        {/* 화면이 medium 사이즈 이상일 때 8칸, 아닐 때는 4칸 */}
        <Grid item xs={4} md={8}>
          <Item>xs=4 md=8</Item>
        </Grid>
      </Grid>
    </Box>
  );
}

Stack

Stack은 1차원 레이아웃(수직 또는 수평)을 쉽게 구성할 수 있게 해줍니다.

import * as React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function DirectionStack() {
  return (
    <div>
      <Stack direction="row" spacing={2}>
        <Item>Item 1</Item>
        <Item>Item 2</Item>
        <Item>Item 3</Item>
      </Stack>
    </div>
  );
}