MUI 설치부터 버튼·카드·모달까지 – 실습으로 배우는 기본 컴포넌트

 

 

MUI(Material UI)는 리액트에서 가장 많이 쓰이는 UI 프레임워크 중 하나입니다.
이번 포스팅에서는 MUI를 설치하고,
실제로 자주 사용하는 버튼, 카드, 모달 컴포넌트를 직접 다뤄보며 사용법을 익혀보겠습니다.

---

 

✅ MUI 설치하기

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

💡 MUI는 Emotion을 기본 스타일 엔진으로 사용하기 때문에 위 세 개를 함께 설치해야 합니다.

 

---

 

✅ 1. MUI 버튼 사용해보기

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

function App() {
  return (
    <div>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
      <Button variant="text">Text</Button>
    </div>
  );
}

 

타입	설명
contained	배경색이 있는 기본 버튼
outlined	테두리만 있는 버튼
text	텍스트만 있는 버튼

 

---

 

✅ 2. 카드(Card) 컴포넌트

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

function SimpleCard() {
  return (
    <Card sx={{ maxWidth: 300, margin: '20px auto' }}>
      <CardContent>
        <Typography variant="h5">MUI Card</Typography>
        <Typography color="text.secondary">설명 텍스트입니다.</Typography>
      </CardContent>
    </Card>
  );
}

 

---

 

✅ 3. 모달(Dialog) 컴포넌트

import { useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';

function ModalExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>모달 열기</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <div style={{ padding: 20 }}>이것은 모달입니다.</div>
      </Dialog>
    </>
  );
}

💡 Dialog는 Modal의 MUI 버전이에요.
열고 닫는 상태를 useState로 관리합니다.

 

---

 

🎁 팁! sx로 스타일 쉽게 커스터마이징

<Button sx={{ backgroundColor: '#1976d2', color: '#fff' }}>
  커스텀 버튼
</Button>

 

MUI는 sx 속성을 통해 인라인 스타일처럼 빠르게 커스터마이징이 가능합니다.