Material UI 적극 활용해보기

컴포넌트를 찾아서 적용해보자

노드 패키지인 @material-ui(v5.0이 되면서 @mui로 변경되었다)에는 다양하고 예쁜 컴포넌트들이 있다.
그리고 material-ui.com에는 React에서 사용 가능한 다양한 컴포넌트의 예시와 코드, API가 있다.
참고로 material 디자인은 구글에서 사용하는 디자인 스타일이다.

Material-UI: A popular React UI framework

---

컴포넌트 목록 보기

사이트의 'Components' 탭에는 다양한 컴포넌트들이 있다.

 

맘에드는 컴포넌트의 코드 보기

'<>' 버튼을 누르면 예시의 전체 코드를 볼 수 있다. 그대로 복사 붙여넣기하면 뚝딱이다.

 

컴포넌트의 세부 정보 (props, dependency 등) 보기

메뉴의 Component API를 클릭해서 내가 사용할 컴포넌트를 찾으면 여러가지 정보를 얻을 수 있다.

 

---

 

컴포넌트 API를 보는 방법

각각의 탭을 하나씩 뜯어서 보자.

Import

패키지 사용을 위해 임포트 하는 방법이다.
@material-ui/core에서 export하는 여러가지 컴포넌트를 가져올 수도 있다.

import { Button, Typography, Tab } from '@material-ui/core';

물론 다른 패키지에도 적용 가능하다.

단일 Import를 할 때의 장점도 있다. 바로 코드가 더 깔끔해진다.
줄의 개수는 늘어날 수 있어도 여러개를 import 하다보면 코드가 옆으로 길어지고 찾기 어려워진다.
그리고 다음과 같이 다양한 이름으로 import하기 쉽다.

import DeleteIcon from '@material-ui/icons/Delete';
import { Delete as DeleteIcon } from '@material-ui/icons';

Export된 컴포넌트는 'Delete'지만 'DeleteIcon'으로 import할 수 있다. 

 

 

Component name

material-ui.com/customization/globals/#default-props

material-ui.com/customization/globals/#css

두 사이트에 들어가보면 설명이 나와있는데, 요약하자면 스타일을 적용할 때 쓰는 클래스명이다.

크롬으로 보면 Button 컴포넌트에 MuiButton으로 시작하는 클래스들이 있다. 일종의 클래스 Prefix같은 개념으로 생각하면 된다.

Props

컴포넌트를 사용할 때 적용할 수 있는 props 키워드들이다. 다음과 같이 적용할 수 있다.

<Button color="secondary" disabled size="large" startIcon={<DeleteIcon />}>
	금붕어의 일기
</Button>

 잘 보면 'disabled'는 값을 지정하지 않았다. 값을 지정하지 않아도 props로 넘기면 boolean형 props들은 true로 들어간다.

만약 내가 Button을 상속해서 MyButton을 만들었다고 치면, 새로운 props의 이름은 위의 props와 겹치지 않게 지정하면 좋다.

 

 

CSS

css를 적용할 때 사용되는 키워드들이다. 왼쪽의 root, label, text가 키워드가 된다.
다음과 같이 사용할 수 있다.

import {Button, withStyles} from '@material-ui/core';

const MyButton = withStyles((theme) => ({
  root: {
    backgroundColor: "#b0b0b0",
    borderRadius: 10,
  },
  label: {
    backgroundColor: "#f2f2f2",
    color: "#555555"
  },
  outlined: {
    backgroundColor: "#0b0b0b",
  },
}))(Button);

return (
  <div>
    <Button>일반 버튼</Button>
    <MyButton>CSS 적용 버튼1</MyButton>
    <MyButton variant="outlined">CSS 적용 버튼2</MyButton>
  </div>
);

withStyles로 적용을 할 때, root, label, outlined 키워드에 대해서 적용을 했다.
material-ui에서 css적용을 하기 쉽도록 각 부분에 클래스를 미리 적용해 놓은 것이다.

그리고 세번째 버튼을 보면 variant="outlined" 상태이다.
withStyles에도 outline키워드가 있는데, 사이트에 나와있는 설명대로 variant가 "outlined"일 때에만 적용되는 스타일이다.

 

 

Inheritance

이 컴포넌트가 어떤 컴포넌트를 상속하였는가에 대한 것이다. 보통 빨간색으로 칠해져있다.

 

 

Demos

이 컴포넌트로 활용한 페이지들을 볼 수 있다. 클릭하면 메뉴의 Component > Button으로 이동한다.