Material UI의 Paper, Card 컴포넌트
May 16, 2020 · 2 min read



웹페이지의 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/> 컴포넌트 컴포넌트를 어떻게 사용하는지 간단하게 살펴보았습니다.






Engineering Blog  by Dale Seo