[Material UI]

Material UI이란?

Material UI(https://material-ui.com/)는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나입니다. 많은 React UI 컴포넌트 라이브러리는 기존에 있는 CSS 라이브러리를 기반으로 만들어지는 경우가 많습니다. React Bootstrap이 대표적인 예인데요. 이러한 React 라이브러리는 근간이 되는 CSS 라이브러리에 대한 이해나 경험이 없는 경우 여러모로 사용하기 불편한 경우가 많습니다.

 

하지만 Material UI는 여타 React UI 컴포넌트 라이브러리와 달리 처음부터 React로 만들어졌기 때문에 많은 개발자들에게 좀 더 나은 나은 경험을 제공하고 있는 것 같습니다.

 

Material-UI의 큰 장점은 공식 홈페이지에 모든 component의 예제가 코드와 함께 제공한다는 점입니다

다양한 props를 활용하여 빠르게 UI를 구현하는 장점도 있습니다.

 

Material UI 사용법

npm install @material-ui/core

• 프로젝트에 material-ui를 추가 합니다.

• 원하는 컴포넌트가 있을때 문서에서 검색해줍니다.

• https://material-ui.com/components/tabs/

문서를 보면 여러 예제가 있는데 < > 버튼을 누르면 code를 확인할 수 있다.

<AppBar position="static">
    <Tabs value={value} onChange={handleChange} aria-label="Main Tabs">
        <Tab label="Home" />
        <Tab label="Send" />
        <Tab label="Profile" />
    </Tabs>
</AppBar>

-사용할 코드를 삽입합니다.

• Component API 를 보고 props 와 제공되는 css를 확인하여 최대한 UI css는 건들지 않는 선에서 작업해야 material design이 변하지 않는 선에서 개발할 수 있습니다.

button Component API( https://material-ui.com/api/tab/)도 확인 해보는 것도 좋습니다.

• 커스텀마이징

React에서는 여러 styling 방법이 있고, material에서도 makeStyles라는 솔루션을 지원하지만, 필자는 프로젝트 전반적으로 하나의 styling 방식을 사용하기 위해 styled-components를 사용하였다. styled-components는 scss 문법도 지원하고 있다.

$ npm install styled-component;

https://material-ui.com/styles/basics/

 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
export default function Hook() {
const classes = useStyles();
return Hook;
}

2 css

컴포넌트가 가지는 css를 설명해줍니다. 기본적으로 root css를 가지며 특정 props를 삽입하거나 동적인 화면으로 변할때 어떤 css가 들어간다는 걸 알려줍니다.

예를 들어 rule name이 textdls 경우 button 컴포넌트에 variant="text" 를 주고 텍스트를 입력할 경우 css Muibutton-text css 가 적용된다는 것이다.