React에서 Material-UI 이용하기

1. Material-UI 소개

• Material-UI이는 React UI Framework 종류 중 하나입니다.
• Material-UI 홈페이지에서도 Material-UI를

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

       라고 소개하고 있네요.

 

2. Material-UI 설치

1. React 프로젝트 생성

//npm 이용 
npm init react-app material-tutorial 

//yarn 이용 
yarn create react-app material-tutorial

• npm과 yarn 둘 중 편한것을 이용하여 프로젝트를 생성합니다.
•  

2. Material-UI 설치

cd material-tutorial

• 생성한 프로젝트로 이동합니다.

//npm 
npm install @material-ui/core 

//yarn 
yarn add @material-ui/core

• 프로젝트를 생성한대로 material-UI를 설치합니다.
  • npm init을 이용하여 프로젝트를 생성했을 경우 npm install 로 설치
  • yarn create를 이용하여 프로젝트를 생성했을 경우 yarn add로 설치

 

3. Material-UI icon 설치

• Material-UI에서 제공하는 아이콘을 사용하기 위해서 별도의 icon 설치가 필요합니다.

//npm 
npm install @material-ui/icons 

//yarn 
yarn add @material-ui/icons

• core 설치와 마찬가지로 생성한 명령어로 설치합니다.

3. Material-UI 적용

1. material-UI 적용 전

import React from 'react'; 

const App = () => { 
    return ( 
    	<div> 
        	<h1>Hello React</h1>
            <span>Hello material</span> 
        </div>
     );
}; 

export default App;

2. Material-UI 적용

• 사용할 모듈을 임포트하여 사용합니다.

import React from 'react'; 
import Typography from '@material-ui/core/Typography'; 

const App = () => { 
	return ( 
    	<div> 
        	<Typography variant="h1">Hello React</Typography> 
            <Typography variant="body1">Hello Material</Typography> 
		</div> 
	); 
}; 

export default App;

더 많은 기능 보기

↓↓↓

Material-UI: A popular React UI framework

Material-UI: A popular React UI framework

 

3. Material-UI icon 사용

• 사용할 아이콘을 임포트하여 사용합니다.

import React from 'react'; 
import Typography from '@material-ui/core/Typography'; 
import PanToolIcon from '@material-ui/icons/PanTool'; 

const App = () => { 
  return ( 
    <div> 
      <Typography variant="h1">Hello React</Typography>
      <Typography variant="body1">Hello Material</Typography> 
      <PanToolIcon /> 
    </div> 
  ); 
}; 

export default App;

더 많은 아이콘 보기

↓↓↓

Material Icons - Material-UI

Material Icons - Material-UI

---