Material UI 설치하기

리액트 개발을 하면서, 컴포넌트를 하나씩 다 생성하고, 커스텀하고, 스타일 하다 보면, 많은 시간이 소모되는 경험이 있으실 겁니다. (저 또한 그랬어요...)

ppt 탬플릿처럼 이미 만들어진 컴포넌트를 불러오기만 하면, 원하는 스타일대로 사용할 수 있지 않을까? 해서 MUI라는 것을 찾았습니다!

 

1. Material UI란?

Material UI란? (공식 홈페이지 바로가기)

React 애플리케이션에서 사용자 인터페이스(UI) 컴포넌트를 쉽게 만들 수 있도록 도와주는 컴포넌트 라이브러리입니다.

이는 일관성 있고 직관적인 UX를 제공하기 위해 만들어졌습니다.

즉, 간편하게 컴포넌트를 구성할 수 있다는 얘기지요.

 

2. MUI 설치

바로 설치해봅시다! (공식 홈페이지 설치방법)

설치하기 전에, MUI는 React 라이브러리이므로, 다음과 같은 코드가 pakage.json 파일 안에 삽입되어 있는지 확인해야 해요.

"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},

 

다음과 같이 입력하여, 설치해 줍니다. (저는 npm을 사용했어요.)

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

전부 완료했으면, 설치가 끝났어요!

 

3. 사용하기

그럼 이제, 실제로 사용해봐야 겠죠?

React 코드에 다음과 같이 입력해 줍니다.

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

const App: React.FC = () => {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
};

export default App;

 

실행해보면?

정상적으로 버튼 컴포넌트가 생성된 것을 확인할 수 있습니다.

 

4. 정리하며

지금까지 Material UI에 대해 알아보았습니다.

이를 활용해, React 개발자들이 유연한 컴포넌트와 일관도니 사용자 경험을 제공할 수 있는 컴포넌트 개발을 할 수 있어요!