할머니의 콤퓨타 도전기

(React) Material-UI 본문

Web Front-end/React.js

(React) Material-UI

ji.o.n.e 2021. 5. 5. 23:27

Material-UI

  • React 개발에서 쉽게 사용할 수 있는 UI Framework

https://material-ui.com/

 

Material-UI: A popular React UI framework

React components for faster and easier web development. Build your own design system, or start with Material Design.

material-ui.com

 

패키지 다운로드

  • npm install @material-ui/core // with npm
  • yarn add @material-ui/core // with yarn

SVG Icons 설치

  • npm install @material-ui/icons // with npm
  • yarn add @material-ui/icons // with yarn

material-ui.com/components/material-icons/

 

Material Icons - Material-UI

1,100+ React Material icons ready to use from the official website.

material-ui.com

 

사용법

  • 사용하고자 하는 항목을 import하고 사용하면 된다.
  • styles를 이용하여 각 component를 커스터마이징 할 수 있다.
import React from 'react';
import Button from '@material-ui/core/Button'; // Button import

function App() {
  return (
    <Button variant="contained" color="primary">
      Primary
    </Button>
  );
}

export default App;

이런식으로 Button을 import하고 사용할 수 있다.

 

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

const useStyles = makeStyles(theme => ({
  margin: {
    margin: theme.spacing(1),
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div>
      <Button variant="contained" color="primary" className={classes.margin}>
        Primary
      </Button>
      <Button variant="contained" color="secondary">
        Secondary
      </Button>
    </div>
  );
}

export default App;

커스터마이징하는 방법은 component의 css 값을 변경해주면 된다. 이 때, styles를 이용하면 쉽게 변경할 수 있다.

사용자 정의 스타일을 적용할 수 있도록 makeStyles를 사용하면 css 속성을 정의한 객체를 값으로 갖는다. makeStyles에 인자로 전달하는 함수는 theme 객체를 인자로 받아 객체를 반환한다. 반환하는 객체의 속성을 클래스 이름이라 생각하고 속성 값이 클래스 이름에 해당하는 스타일이라 생각하면 된다.

 

Material-UI의 공식 홈페이지에 모든 component의 예제가 코드와 함께 제공된다. 또한 기본으로 제공하는 template도 있기 때문에 간단한 UI를 구현할 수 있다.

'Web Front-end > React.js' 카테고리의 다른 글

Component Life Cycle  (0) 2021.04.08
All you need to know about State  (0) 2021.04.08
Class Components and State  (0) 2021.04.08
npm? npx? 🤔  (0) 2021.04.07
Protection with PropTypes  (0) 2021.04.01
Comments