Material-UI(MUI) 설치하고 시작하는 법 – 빠른 개요
처음부터 바로 UI를 만들고 싶다면 Material-UI(MUI) 설치하고 시작하는 법을 빠르게 익히면 돼요. 이 글은 React 프로젝트에 MUI를 설치하고 기본 테마와 컴포넌트를 적용하는 과정을 단계별로 정리했어요. 설치 명령과 코드 예제를 바로 따라 할 수 있게 구성했어요.
설치: npm과 yarn으로 MUI 설치하기
프로젝트가 준비되었다면 터미널에서 패키지를 설치하면 돼요. 보통 Create React App이나 Vite로 만든 프로젝트에서 바로 진행하면 편해요. 아래 명령 중 하나를 골라 실행하면 Material-UI(MUI) 설치하고 시작하는 법의 첫 단계가 끝나요.
- npm 사용: npm install @mui/material @emotion/react @emotion/styled
- yarn 사용: yarn add @mui/material @emotion/react @emotion/styled
아이콘이나 추가 패키지가 필요하면 @mui/icons-material 같은 패키지도 설치하면 돼요. 설치 후에는 React 앱에서 바로 import해서 사용하면 돼요.
브라우저 폰트 설정
Material Design 폰트를 사용하려면 index.html에 Roboto 링크를 추가하면 돼요. 선택사항이긴 한데 기본 스타일과 잘 어울려요. 예: <link href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap” rel=”stylesheet”>.
설치는 npm/yarn으로 간단히 끝나고, ThemeProvider로 앱을 감싸면 기본 스타일을 바로 적용할 수 있어요.
기본 사용법: ThemeProvider와 버튼 예제
설치가 끝나면 가장 먼저 할 일은 앱 루트에 ThemeProvider를 적용하는 거예요. 이렇게 하면 전체 컴포넌트에 테마가 자동으로 적용돼요. 간단한 예제를 통해 구조를 확인해볼게요.
src/App.js 예시 코드:
import { ThemeProvider, createTheme } from ‘@mui/material/styles’;
import Button from ‘@mui/material/Button’;
const theme = createTheme();
function App(){ return (<ThemeProvider theme={theme}><Button variant=”contained”>Hello</Button></ThemeProvider>); }
이 코드만으로도 MUI 버튼을 사용할 수 있어요. 컴포넌트는 @mui/material에서 가져오면 되니 구조가 단순해요.
테마를 커스터마이징하면 폰트, 색상, 간격을 한 번에 관리할 수 있어요. createTheme로 색상 팔레트만 바꿔도 일관된 디자인을 유지할 수 있어요.
팁과 주의사항
MUI 버전은 major 업데이트에서 API가 바뀔 수 있으니 package.json의 버전을 고정해 두는 게 좋아. 또 서버 사이드 렌더링(SSR)을 쓸 때는 스타일 삽입 순서를 주의해야 해요. 공식 문서를 참고하면 세부 설정을 확인할 수 있어요.
- 컴포넌트 명세는 문서에서 확인하면 편해요
- 스타일 오버라이드는 sx prop이나 styled API를 활용하면 돼요
- 아이콘은 @mui/icons-material을 추가 설치하면 바로 사용 가능해요
- ☑️ 프로젝트 생성(CRA/Vite)
- ☑️ @mui/material 설치
- ☑️ ThemeProvider 적용
- ☑️ 필요한 추가 패키지 설치
요약하면, Material-UI(MUI) 설치하고 시작하는 법은 설치 → ThemeProvider 적용 → 컴포넌트 사용 순서로 하면 돼요. 처음에는 버튼, 입력폼 같은 기본 컴포넌트부터 시작하면 학습 곡선이 완만해요.
Material-UI(MUI) 설치하고 시작하는 법 핵심은 npm 또는 yarn으로 패키지를 설치하고 ThemeProvider로 앱을 감싸면 돼요.