머티리얼 UI 소개

UI 컴포넌트 라이브러리는 구글의 머티리얼 디자인 가이드라인을 기반으로 구글에서 개발했습니다. 액세스 가능하고 구성 가능한 많은 UI 위젯으로 구성되며 구성 요소는 자체 지원되며 표시해야 하는 스타일만 삽입합니다. 강력한 커뮤니티의 지원을 받아 가장 인기 있는 구성 요소 라이브러리 중 하나입니다. 주요 장점은 UI 레이아웃에 대한 Google의 경험에서 차용한 사용자 친화적인 레이아웃과 디자인 기능입니다. 다음은 React에 설치하고 사용하는 방법에 대한 간략한 소개입니다.

설치

반응 앱에서 실행:
npm install @material-ui/core
그런 다음 Material UI가 Roboto 글꼴을 염두에 두고 설계되었으므로 Google Roboto 글꼴을 추가하여 index.html 파일을 업데이트합니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
사용하는 방법

다음은 머티리얼 UI 구성 요소를 활용하는 몇 가지 예입니다. 또한 개발 서버npm start를 실행하여 어떻게 보이는지 확인할 수 있습니다.

App.js에서는 '@material-ui/core/AppBar'에서 구성 요소를 가져오고 색상 및 위치 소품을 전달할 수 있습니다.

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';

class App extends Component {
  render() {
    return (
      <div>
        <AppBar color="primary" position="static">
          <h1>My header</h1>
        </AppBar>

      </div>
    );
  }
}
export default App;

그런 다음 Typgoraphy 및 Toolbar를 가져와 헤더의 간격을 더 좋게 만들 수 있습니다.

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'
import TypoGraphy from '@material-ui/core/Typography'


class App extends Component {
  render() {
    return (
      <div>
        <AppBar color="primary" position="static">
          <Toolbar>
            <TypoGraphy variant="title"
              color="inherit"
            >
              My header
           </TypoGraphy>
          </Toolbar>
        </AppBar>

      </div>
    );
  }
}
export default App; 

navbar.js를 만들고 ListItem 및 ListItemText를 가져옵니다. 각 ListItem 구성 요소에는 html 탐색 요소를 가져올 수 있도록 탐색에 대한 구성 요소 prop 값이 있습니다.

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import TypoGraphy from '@material-ui/core/Typography'


function NavBar(props) {

    return (
        <List component="nav">
            <ListItem component="div">
                <ListItemText inset>
                    <TypoGraphy color="inherit" variant="title">
                        Home
               </TypoGraphy>
                </ListItemText>


                <ListItemText inset>
                    <TypoGraphy color="inherit" variant="title">
                        Posts
               </TypoGraphy>
                </ListItemText>


                <ListItemText inset>
                    <TypoGraphy color="inherit" variant="title">
                        Contact
               </TypoGraphy>
                </ListItemText>
            </ListItem >

        </List>
    )
}


export default NavBar;

Material UI에는 구성 요소에서 사용할 SVG 아이콘도 있습니다. 다음으로 설치: npm install @material-ui/icons
navbar.jsL에서:

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import TypoGraphy from '@material-ui/core/Typography'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import { Home, Book, AccountBox } from '@material-ui/icons'

function NavBar(props) {

    return (
        <List component="nav">
            <ListItem component="div" >

                <ListItemText inset>
                    <TypoGraphy color="inherit" variant="title">
                        Home  <Home />
                    </TypoGraphy>
                </ListItemText>


                <ListItemText inset>
                    <TypoGraphy color="inherit" variant="title">
                        Posts <Book />
                    </TypoGraphy>
                </ListItemText>

                <ListItemText inset>
                    <TypoGraphy color="inherit" variant="title">
                        Contact <AccountBox />
                    </TypoGraphy>
                </ListItemText>
            </ListItem >

        </List>
    )
}


export default NavBar;

이것은 머티리얼 UI와 이것으로 무엇을 할 수 있는지에 대한 간략한 설명입니다. 그리드 레이아웃, 폼 컨트롤, 입력 등을 만들 수 있습니다. 자세한 내용은 공식 사이트에서 확인하세요.

참고문헌

https://material-ui.com/getting-started/installation/

https://reactgo.com/material-ui-react-tutorial/

https://www.npmjs.com/package/@material-ui/core