Logo

Material UI의 버튼 컴포넌트

React 앱을 개발할 때 Material UI와 같은 컴포넌트 라이브러리를 사용하는 이유 중 하나는 버튼과 같이 너무 기본적인 컴포넌트를 직접 구현하는데 들어가는 시간과 노력을 절약하기 위함일 것입니다.

일반적으로 버튼은 UI에서 사용자의 명령을 받아드리는 창구 역할을 하고, 여러 페이지에 거쳐서 다양한 형태로 사용됩니다. 따라서 단순히 사용자 경험 뿐만 아니라 해당 서비스의 전체적인 브랜드 이미지에도 큰 영향을 줄 수 있습니다.

이번 포스팅에서는 이렇게 생각보다 상당히 중요할 수 있는 버튼을 Material UI에서 제공하는 <Button/> 컴포넌트를 이용하여 표현을 해보도록 하겠습니다.

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

3가지 형태

Material UI는 text, contained, outlined 이렇게 3가지 형태의 버튼을 제공하고 있습니다. contained 형태는 배경색이 들어가 있고, outlined 형태는 테두리가 있습니다. 기본 형태인 text는 배경색과 테두리 없이 텍스트에만 스타일이 적용됩니다.

import React from "react";
import { Button } from "@material-ui/core";

export default () => (
  <>
    <Button>Text</Button>
    <Button variant="contained">Contained</Button>
    <Button variant="outlined">Outlined</Button>
  </>
);

색상과 크기

색상은 color prop을 이용해서 조절할 수 있습니다.

import React from "react";
import { Button } from "@material-ui/core";

export default () => (
  <>
    <Button variant="contained">Default</Button>
    <Button variant="contained" color="primary">
      Primary
    </Button>
    <Button variant="contained" color="secondary">
      Secondary
    </Button>
  </>
);

크기는 size prop을 이용해서 조절할 수 있습니다.

import React from "react";
import { Button } from "@material-ui/core";

export default () => (
  <>
    <Button variant="outlined" color="secondary" size="small">
      Small
    </Button>
    <Button variant="outlined" color="secondary">
      Medium
    </Button>
    <Button variant="outlined" color="secondary" size="large">
      Large
    </Button>
  </>
);

아이콘 버튼

버튼에서 텍스트의 좌측이나 우측에 아이콘을 넣고 싶을 때는 startIcon이나 endIcon prop에 아이콘을 설정해주면 됩니다.

import React from "react";
import { Button } from "@material-ui/core";

import SaveIcon from "@material-ui/icons/Save";
import DeleteIcon from "@material-ui/icons/Delete";

export default () => (
  <>
    <Button variant="contained" color="primary" startIcon={<SaveIcon />}>
      Save
    </Button>
    <Button variant="contained" color="secondary" endIcon={<DeleteIcon />}>
      Delete
    </Button>
  </>
);

텍스트가 없는 순수 아이콘 버튼은 <Button/> 대신에 <IconButton/> 컴포넌트를 사용해서 해당 아이콘을 감싸줍니다.

import React from "react";
import { IconButton } from "@material-ui/core";

import StarIcon from "@material-ui/icons/Star";
import FavoriteIcon from "@material-ui/icons/Favorite";

export default () => (
  <>
    <IconButton aria-label="star">
      <StarIcon />
    </IconButton>
    <IconButton color="secondary" aria-label="favorite">
      <FavoriteIcon />
    </IconButton>
  </>
);

그밖에도

Material UI 버튼은 기본적으로 살짝 돌출되어 보이며 클릭했을 때 물결이 퍼지는 듯한 효과가 나타납니다. 이러한 특징을 비활성화 시키고 싶다면 disableElevation와 disableRipple prop을 사용하면 됩니다.

마지막으로, disabled 속성이 적용된 비활성화된 버튼은 형태와 상관없이 자동으로 회색으로 뿌옇게 처리가 됩니다.

import React from "react";
import { Button } from "@material-ui/core";

export default () => (
  <>
    <Button variant="contained" disabled>
      Disabled
    </Button>
    <Button variant="contained" disableElevation>
      Disable Elevation
    </Button>
    <Button variant="contained" disableRipple>
      Diable Ripple
    </Button>
  </>
);

전체 코드

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

마치면서

이상으로 Material UI의 <Button/> 컴포넌트를 어떻게 사용하는지 간단하게 살펴보았습니다. 다음 포스팅에서는 개인적으로 Material UI의 꽃이라고 생각하는 <TextField/> 컴포넌트에 대해서 알아보겠습니다.

This work is licensed under CC BY 4.0

messageCircle