[React/MUI] MUI 설치 및 사용법

Material UI (MUI)는 Google의 Material Design 을 구현하는 오픈소스 라이브러리이며,

리액트 환경에서 필요한 컴포넌트를 쉽게 사용할 수 있다는 장점이 있다. 

https://mui.com/

MUI: The React component library you always wanted

 

1. 설치

 

터미널에서 npm 일 경우,  yarn일 경우 해당되는 명령어로 설치한다. 

 

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

yarn add @mui/material @emotion/react @emotion/styled

 

기본적으로 emotion을 스타일 엔진으로 사용하지만,

emotion 대신 styled-components을 스타일 엔진으로 사용할 수 있다.

styled-components는 다음 명령어로 설치하면 된다. 

 

npm install @mui/material @mui/styled-engine-sc styled-components

yarn add @mui/material @mui/styled-engine-sc styled-components

 

이외에 폰트, 아이콘 설치에 관한 정보는

공식 홈페이지 (https://mui.com/material-ui/getting-started/installation/) 를 둘러볼 것을 추천한다. 

 

 

2. 사용법

 

import 로 필요한 컴포넌트를 불러와서 사용할 수 있다. Button 컴포넌트는 다음과 같이 사용할 수 있다. 

 

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

function App() {

  return (
    <React.Fragment>
      <Button variant="contained">Hello World</Button>
    </React.Fragment>
  );
}

export default App;

3. 튜토리얼 등 학습 자료

 

공식 홈페이지의 설명을 따라가기 어렵다면 유튜브 튜토리얼 영상을 몇번 따라해보면 MUI의 사용법을 쉽게 익힐 수 있다.

 

https://mui.com/material-ui/getting-started/learn/#free

Learning resources - Material UI