[React] 리액트 컴포넌트 라이브러리 Material-UI

 

Meterial-UI

Material-UI 홈페이지 : https://material-ui.com/

 

설치

 

npm install @mui/material @emotion/react @emotion/styled

 

 

 

Material-UI는 Github에서 가장 인기있는 React 오픈 소스 컴포넌트 라이브러리이다.

간단하고 가벼우며 Google의 Material Design 사양에 따라 제작되었다.

@material-ui/style로 컴포넌트를 스타일링 할 수 있고 CSS-in-JS 솔루션은 빠르고 확장 가능하며

스타일링 된 컴포넌트와 동일한 이점을 제공한다.

Material-UI는 다른 주요 스타일링 솔루션과도 상호 운용이 가능하므로 스타일링을 사용할 필요가 없다.

 

 

사용법

1. 사용하고자 하는 항목을 import 한다

2. 사용한다

3. syles(응용)를 이용하여 각 component를 커스텀마이징한다.

 

커스텀 마이징하는 방법은 Component에 css 값을 변경해주면 된다.
각 태그마다 선언하는게 아니라 styles을 사용하면 보기 쉽게 변경하실 수 있다.
(Material-UI에서 제공하는 Templete 에서 사용하는 방법이다. 태그에 직접 추가 하는 방식으로 하셔도 된다.)

 

 

Material-UI에서 기본으로 제공하는 Templete을 사용하면 간단한 UI 정도는 금방 구현할 수 있다.

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

9+ Free React Templates - Material UI

 

 

 

웹사이트에서 기본으로 필요한 레이아웃들을 Templete으로 제공하고 있어서

깔끔한 디자인을 원하는 프로그래머에게 유용할 것 같다.