[React] 📖 MUI 란?

📍 MUI 란?

: Material Design 을 구현해놓은 라이브러리 입니다.

: 프레임워크에서 쉽게 웹사이트를 디자인을 만들 수 있도록 도와준다.

---

📍 MUI의 장점

1. 이미 만들어진 디자인

   • 버튼, 입력창, 메뉴, 카드 같은 디자인 컴포넌트들이 만들어져있다.

     import Button from '@mui/material/Button';
   
     function App() {
         return <Button />;
     }
   

   사용하고 싶은 디자인 컴포넌트을 선언하고 코드에 컴포넌트명 (Button)을 선언하면 된다.

2. 이미 만들어진 디자인을 내 스타일대로 변경하거나, 색깔과 모양을 쉽게 변경할 수 있다.

   import { styled } from '@mui/material/styles';
    import Button from '@mui/material/Button';
   
    export const CustomButton1 = styled(Button)(({ theme }) => ({
        position: 'relative', // ::before 가상 요소가 버튼 내부에 위치하도록 설정
        overflow: 'hidden', // 버튼 외부로 벗어나는 요소를 숨김
        borderRadius: '50%',
        padding: 0, // 버튼의 padding 제거
        border: 'none', // 불필요한 border가 없도록 설정
        width: '65px', // 버튼의 가로 크기
        height: '65px', // 버튼의 세로 크기 (가로와 동일하게 설정)
        '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            borderRadius: 'inherit',
            backgroundColor: 'rgba(245, 245, 245, 0)', // 초기에는 투명
            transition: 'background-color 0.3s ease', // 부드러운 전환 효과
            zIndex: 1,
        },
        '&:hover::before': {
            backgroundColor: 'rgba(245, 245, 245, 0.7)', // 호버 시 내부에 투명한 회색 오버레이 적용
            borderRadius: '50%',
        },
        '&:hover': {
            backgroundColor: 'rgba(245, 245, 245, 0)', // 기본 파란색 호버 스타일 덮어쓰기ㄴ
            borderRadius: '50%',
        },
    }));

❗️ 커스터마이징한 컴포넌트명이 CustomButton1 이므로 이 디자인된 컴포넌트를 사용하려면 사용할 페이지.js(x) 파일에 CustomButton1 import 하고 위치하고자하는 곳에 <CustomButton1 /> 을 넣으면 된다.

3. 반응형 디자인이 가능하다
   • 컴퓨너, 태블릿, 스마트폰 화면 크기에 따라 자동으로 디자인이 조정이된다.

---

📍 MUI 사용 방법

⬇️ 다운로드

npm install @mui/material [다른 패키지들]

📍 다른 패키지들 종류

• @mui/materia : MUI 라이브러리의 핵심 컴포넌트를 제공
• @emotion/react : CSS-in-JS 방식으로 스타일 작성
  (CSS-in-JS 방식 : 자바스크립트 코드 안에서 CSS 스타일을 작성)
• @emotion/styled : React 컴포넌트를 스타일링된 컴포넌트로 만듦
  (import { styled } from '@mui/material/styles';) 선언
• @mui/icons-material : MUI에서 사용할 수 있는 다양한 아이콘을 제공
  (import [아이콘명] from '@mui/icons-material/[아이콘명]';) 선언
  https://mui.com/material-ui/material-icons/ ➡️ 여기에서 아이콘을 가져온다.