Material UI 시작하기

<aside>

📌 라이브러리 소개

MUI 란? https://mui.com/material-ui/getting-started/

Material UI는 Google의 Material Design을 구현하는 오픈 소스 React component library로서, HTML-CSS의 컴포넌트를 불러와 사용하는 CSS라이브러리이다.
Material UI라고 불리던 MUI는 5 버전으로 리뉴얼 되면서 기존의 Material UI라는 이름을 버리고, MUI라는 이름으로 바뀌었다.
스타일링은 sx prop을 통한 인라인 방식, styled()를 사용한 CSS-in-JS 방식, makeStyles()를 활용한 클래스 기반 방식 등 다양한 방법을 제공한다. </aside>

<aside>

💡 설치 및 사용

설치

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

mui 라이브러리와 함께 emotion 라이브러리도 설치해준다.
emotion이란 styled component과 비슷한 CSS in JS 라이브러리이다. JS로 CSS를 작성하도록 설계된 라이브러리.

원하는 컴포넌트 import

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

컴포넌트로 사용

  
  //생략    
      
      <Box sx={{ width: '100%', maxWidth: '600px' }}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs value={value} onChange={handleChange} aria-label="follow/following tabs">
            <Tab label="팔로우" {...a11yProps(0)} />
            <Tab label="팔로잉" {...a11yProps(1)} />
          </Tabs>
        </Box>
       </Box>
       
//생략

</aside>

<aside>

➕ 추가 옵션

Roboto 폰트(Roboto font)

설치 명령어
```
npm install @fontsource/roboto
```

index.js 파일에 import하기

// index.js 에 추가
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

컴포넌트에서 사용하기

<Button variant="contained" sx={{ fontWeight: 300 }}>
    ROBOTO FONT
</Button>
<Button variant="contained" sx={{ fontWeight: 700 }}>
    ROBOTO FONT
</Button>

fontWeight의 값만 설정해주면 된다.

(권장) 전역 설정하기

지금 MUI 컴포넌트에는 적용되었지만, 일반 HTML태그에는 적용이 안되었다.

전역에 적용하려면 CssBaseline 이 필요하다.

아이콘

설치 명령어
```
npm install @mui/icons-material
```
여기서 쓰고 싶은 아이콘을 찾는다.

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

임포트

import HomeIcon from '@mui/icons-material/Home';

다양한 사용 방법

그냥 아이콘만 띄우기

import HomeIcon from '@mui/icons-material/Home';

   <HomeIcon />

버튼에 아이콘 이미지 삽입하기

import { Button } from '@mui/material';
import HomeIcon from '@mui/icons-material/Home';

  <Button startIcon={<HomeIcon />} variant="contained" sx={{ fontWeight: 700 }}>
      home
  </Button>

클릭 가능한 아이콘 버튼 만들기

import IconButton from '@mui/material/IconButton';
import HomeIcon from '@mui/icons-material/Home';

  <IconButton aria-label="홈">
      <HomeIcon />
  </IconButton>

1 2 3

</aside>

<aside>

🎯 주요 컴포넌트

레이아웃 관련

<Container> 
// 내용물을 중앙 정렬하고 최대 너비 제한
// maxWidth prop으로 xs, sm, md, lg, xl 설정 가능

<Box>
// div와 비슷한 기본 레이아웃 컴포넌트
// sx prop으로 스타일링 가능
// display, flexbox 등 설정 용이

<Grid>
// 12칼럼 그리드 시스템
// 반응형 레이아웃 구성에 사용

버튼 관련

<Button>
// variant="text" | "contained" | "outlined"
// color="primary" | "secondary" | "error" | etc
// size="small" | "medium" | "large"

<IconButton>
// 아이콘 버튼

<ButtonGroup>
// 여러 버튼을 그룹으로

디스플레이 관련

<Typography>
// 텍스트 표시용
// variant="h1" ~ "h6", "body1", "body2" 등
// component로 실제 HTML 태그 지정

<Paper>
// 카드같은 효과를 주는 컨테이너
// elevation으로 그림자 강도 조절

<Card>
// 카드 형태의 컨테이너
<CardContent>
// 카드 내용

피드백 관련

<Dialog>
// 모달 다이얼로그

<Snackbar>
// 토스트 메시지

<CircularProgress>
// 로딩 스피너

<Alert>
// 경고, 성공 등 메시지

입력 관련

**<TextField>
// 텍스트 입력 필드
// variant="outlined" | "filled" | "standard"
// size="small" | "medium"
// multiline - 여러 줄 입력
// error - 에러 상태
// helperText - 도움말 텍스트

<Select>
// 드롭다운 선택
<MenuItem>
// Select의 옵션들

<Checkbox>
// 체크박스

<Radio>
// 라디오 버튼**

테이블 관련

<TableContainer>
// 테이블을 감싸는 컨테이너

<Table>
// 테이블 컴포넌트

<TableHead>
// 테이블 헤더 영역

<TableBody>
// 테이블 본문 영역

<TableRow>
// 테이블 행

<TableCell>
// 테이블 셀
// align="left" | "center" | "right"

네비게이션 관련

6. 네비게이션 관련
<AppBar>
// 상단 네비게이션 바

<Drawer>
// 사이드 메뉴

<Tabs>
<Tab>
// 탭 네비게이션

</aside>

<aside>

💅 CSS

sx prop

Material-UI에서 제공하는 인라인 스타일링을 위한 특별한 속성

예시

sx={{ 
  // 인라인 스타일링
  mt: 2,  // margin-top
  p: 3,   // padding
  display: 'flex',
  gap: 2,
  backgroundColor: 'primary.main',
  '&:hover': {
    backgroundColor: 'primary.dark'
  }
}}

spacing 단위

Material-UI(MUI)의 주요 spacing 단위는 기본적으로 8px을 기준으로 한다.

MUI 축약어

반응형

종류
예시
커스터마이징

MUI에서 제공하는 기본 색상 팔레트

</aside>

<aside>

</aside>