제발 디자인 못하면 mui 쓰세요! - mui 사용기

 

최근에 예전부터 들어봤었던 mui를 사용해보았다 사용하면서 느낀점을 적어보려고 한다

일단 mui는 리액트 ui 프레임워크이다 손쉽게 ui를 가져다 쓸수 있도록 제공한다

개발 편의성

나의 경우에는 퍼블리싱을 하는데 소모하는 시간이 많은 편이다 하지만 mui를 사용한다면

개발할때 퍼블리싱에 중점을 두지 않아도 되므로 로직적인 부분에만 집중을 할수도 있고 코드의 양도 줄어들것이다

커스텀 가능

기본적으로 제공하는 ui를 사용할수도 있지만 컬러나 다른 부분들이 마음에 들지 않는다면 커스텀하여 사용도 가능하다

어차피 커스텀할거면 뭐하러 프레임워크를 사용하냐고 말할수도 있지만 커스텀을 하더라도 기초 틀이 잡혀있어서 훨씬 편하다

커스텀하는 방법은 밑에서 사용법과 같이 설명하도록 하겠다

styled-components(emotion) 기반

styled-components(emotion)를 기반으로 만들어졌기 때문에

styled-components의 기능을 그대로 사용하면서 mui의 ui들도 같이 사용할수 있다

예를 들어 styled-components의 기능인 theme기능을 사용한다던지 가능하다

엄청난 반응형

이거는 말이 필요 없을정도이다 영상으로 확인해보자

 

 

사용법

설치

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

 

나의 경우는 pnpm으로 진행하였다

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

// mui icon font
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

 

 

mui에서 기본적으로 사용하는 font로 head 태그안에 넣어준다

이렇게 세팅하면 이제 컴포넌트를 불러와서 사용하면 된다

 

Button

예시로 Button 컴포넌트를 사용해보겠다

https://mui.com/material-ui/react-button/

import { Button } from "@mui/material";

export default function Home() {
  return (
    <div>
      <Button>hihi</Button>
    </div>
  );
}

 

일반 컴포넌트를 사용하는것처럼 사용하면 된다

 

해당 영상처럼 보여진다

 

mui에서는 해당 디자인만 존재 하지는않고 다른 디자인도 존재한다

variant 옵션에 따라 디자인도 다르다

위의 디자인이 마음에 들지 않는다면 직접 커스텀해서 사용해도 된다

 

커스텀

mui 컴포넌트를 커스텀하는 방법은 2가지가 있다

• sx props를 사용해 커스텀
• styled-components 형식을 사용해 커스텀

sx

sx 방식은 style props를 사용해 스타일 하는것처럼 커스텀한다

import { Button } from "@mui/material";

export default function Home() {
  return (
    <div>
      <Button sx={{ bgcolor: "red", m: "10px", p: "1px" }} variant="contained">
        hihi
      </Button>
    </div>
  );
}

 

※ bgcolor - background-color, m - margin, p - padding 이다

styled-components

import { Button, styled } from "@mui/material";

export const Container = styled(Button)`
  background-color: ${({ theme }) => theme.palette.primary[500]};
  color: ${({ theme }) => theme.palette.primary[100]};
`;

 

styled-components를 선언하는 것처럼 커스텀 하여 사용할 수 있다

 

마무리

현재 우리학교에서 하는 프로젝트는 대부분은 직접 컴포넌트를 다 퍼블리싱한다 하지만 시간이 부족하거나 로직에 집중하고 싶다면 또 하나의 선택지가 될수도 있어서 좋은 프레임워크라고 생각하고 공식문서도 잘 나와있어 사용하는데도 힘들지 않았다