[React] Material UI 라이브러리 사용해보기

Today, What I learned?

프로젝트에 쓸 수도 있는(?) UI 라이브러리를 한번 맛보기로 사용해 보았다.

이번에 처음 알게 되었는데 Material UI는 리액트 UI 라이브러리 중 가장 유명한 것이라고!...

오늘은 간략한 설치 방법과 활용에 대해서 조금 정리해 본다.

 

Material UI

Material UI는 구글의 Material Design을 바탕으로 만들어진 리액트 라이브러리이다.

부트스트랩처럼 깔끔하고 정돈된 UI를 쉽게 사용할 수 있다.

공식 문서와 추가적인 정보는 아래 사이트에서 확인할 수 있다.

https://mui.com/

MUI: The React component library you always wanted

 

 

설치

npm을 이용한다면,

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

yarn을 이용한다면,

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

 

 

사용

import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';

이렇게 컴포넌트를 import 해서 사용한다.

 

import Button from '@mui/material/Button';

const Home = () => {
  return <Button size="lg">Text</Button>;
};

export default Home;

MUI에서 굉장히 다양한 컴포넌트들을 제공하고, 아이콘도 쓸 수 있다.