Logo

Material UI의 Paper, Card 컴포넌트

웹페이지의 UI를 구현하다 보면 서로 관련이 있는 여러 개의 컴포넌트를 시각적으로 하나의 그룹처럼 묶어주는 컴포넌트가 필요합니다. 이렇게 관련된 여러 컴포넌트를 보기 쉽게 도와주는 Material UI의 <Paper/>와 <Card/> 컴포넌트에 대해서 알아보겠습니다.

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

Paper 컴포넌트

먼저 살펴볼 <Paper/> 컴포넌트는 마치 포스팅잇처럼 화면에서 도드라져 보이는 효과를 제공합니다.

elevation, outlined 이렇게 2가지 형태를 사용할 수 있는데요. elevation는 해당 영역이 약간 튀어나와 보이고, outlined은 윤곽선이 보입니다.

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

const useStyles = makeStyles((theme) => ({
  paper: {
    padding: theme.spacing(2),
  },
}));

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

  return (
    <>
      <Paper elevation={3} className={classes.paper}>
        <Typography variant="h6" color="primary" gutterBottom>
          Plus
        </Typography>
        <Typography variant="body1">$3,000</Typography>
      </Paper>
      <br />
      <Paper variant="outlined" className={classes.paper}>
        <Typography variant="h6" color="secondary" gutterBottom>
          Minus
        </Typography>
        <Typography variant="body1">$2,400</Typography>
      </Paper>
    </>
  );
};

위 예제 코드에서 보이는 것과 같이 사용법은 매우 간단합니다. 여러 컴포넌트를 <Paper/> 컴포넌트로 감싸고 elevation이나 variant 속성을 원하는 값으로 설정해주면 됩니다.

Card 컴포넌트

<Paper/> 컴포넌트를 확장한 <Card/> 컴포넌트는 여러 컴포넌트를 좀 더 형식에 맞춰서 묶어줄 때 사용됩니다. 제목을 담기 위한 <CardHeader/>, 내용을 담기 위한 <CardContent/>, 버튼을 담기 위한 <CardActions/>와 같은 내부 컴포넌트를 활용해서 <Card/> 컴포넌트의 내부 영역을 구분해줄 수 있습니다.

import React from "react";
import {
  Button,
  Card,
  CardHeader,
  CardContent,
  CardActions,
  TextField,
  Typography,
} from "@material-ui/core";

export default () => (
  <Card elevation={5}>
    <CardHeader title="Title" />
    <CardContent>
      <Typography variant="body1" component="p">
        Please enter something. <br />
      </Typography>
      <TextField label="content" />
    </CardContent>
    <CardActions>
      <Button variant="contained" color="primary">
        button
      </Button>
    </CardActions>
  </Card>
);

전체 코드

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

마치면서

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

This work is licensed under CC BY 4.0

messageCircle