[Material-UI 실습] 2. Material-UI 설치 및 컴포넌트 이용하기

Material-UI를 사용하기 위해 다음과 같이 명령어를 입력하여 모듈을 설치한다.

npm install @material-ui/core

package.json 파일의 dependencies에 @material-ui/core 모듈이 추가되었는지 확인한다.

 

 

리액트의 컴포넌트에는 두 가지 종류가 있다. 함수형 컴포넌트와 클래스형 컴포넌트이다. 둘의 차이를 여기서 설명하진 않겠다. Material-UI 웹 페이지에서는 제공하는 대부분의 예제가 함수형이므로 클래스형으로도 한번 작성해보고 싶어 여기서는 클래스형으로 컴포넌트를 생성하였다. Create React App에서 App.js는 함수형으로 작성되었으므로 클래스형으로 수정한다.

 

App.js

import React from 'react';
import Main from './component/Main'
class App extends React.Component{
  render(){
    return (
      <div>
        <Main/>
      </div>
    );
  }
}
export default App;

 

App.js에서는 Main 컴포넌트를 불러온다. Main 컴포넌트에서는 Material-UI의 가장 기본적인 Button 컴포넌트를 보여주도록 작성하였다.

 

Main.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
class Main extends Component {
  render() {
    return (
      <Button variant="contained" color="primary">
        Hello Main.js
      </Button>
    );
  } 
}
export default Main;

 

화면 결과는 다음과 같다.

 

Material-UI는 기본적으로 Roboto 폰트를 사용한다고 가정하고 만들었다고 한다. 따라서 index.html의 head 태그에 다음과 같이 코드를 추가하여 폰트를 적용시킨다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

다음과 같이 수정된 폰트를 확인한다.

 

 

Material-UI를 설치하고 컴포넌트를 이용하는 방법은 다음을 참고하였다.

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

Usage - Material-UI

Material-UI 실습을 진행한 코드는 여기에서 확인할 수 있다.

https://github.com/Jongbeom2/material-ui-tutorial

Jongbeom2/material-ui-tutorial

구현된 결과물은 여기서에서 확인할 수 있다.

https://jb-material-ui-tutorial.herokuapp.com/

Material UI Tutorial