Material UI

Google의 Material Design을 구현한 오픈 소스 React 컴포넌트 라이브러리

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

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

•

특징:

◦

React 중심: React 프로젝트에 최적화된 컴포넌트를 제공합니다.

◦

Production Ready: 기본적으로 프로덕션 환경에서도 바로 사용할 수 있을 만큼 안정적이고 완전한 기능을 갖추고 있습니다.

◦

포괄적: 버튼, 카드, 네비게이션 드로어, 테이블 등 다양한 UI 요소를 포함하고 있어, 별도의 추가 작업 없이 바로 사용 가능합니다.

•

장점:

일관된 디자인: Google Material Design 가이드라인을 따르므로 일관된 UI를 쉽게 구현할 수 있습니다.

높은 커스터마이징: 스타일링을 위해 CSS-in-JS 방식이나 Emotion, Theme 기능을 제공하여 다양한 요구사항에 맞출 수 있습니다.

생산성 향상: 사전 제작된 컴포넌트로 개발 시간을 단축시킬 수 있습니다.

커뮤니티와 지원: 활발한 오픈소스 프로젝트로, 광범위한 문서와 예제가 제공됩니다.

사용하기

•

npm 설치

•

Material Design Icon

•

Material Design Component

npm 설치

npm install @mui/icons-material @mui/material @emotion/react @emotion/styled
Bash
복사

Material Design Icon

아래 링크에서 사용하고 싶은 아이콘 컴포넌트를 찾아보세요

MUI_hqMaterial Icons - Material UI

Material Icons - Material UI

2,100+ ready-to-use React Material Icons from the official website.

https://mui.com/material-ui/material-icons/

기본 예시

import './App.css';
import HomeIcon from "@mui/icons-material/Home";
import SearchIcon from "@mui/icons-material/Search";
import FavoriteIcon from "@mui/icons-material/Favorite";
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
function App() {

  return (
    <div>
      <HomeIcon />
      <SearchIcon />
      <FavoriteIcon />
      <DeleteForeverIcon />
    </div>
  )
}

export default App
JavaScript
복사