[UI] MUI(material UI)는 무엇일까?

 

 

요즘 나는 회사에서 MUI를 이용하여 개발을 하고있다.

 

처음엔 스타일드 컴포넌트가 아닌 MUI를 이용해서 개발을 한다는것에 거부감이 들기도 했지만
mui라는 녀석도 상당히 간편하게 사용할수 있는 친구인것같아서 이렇게 블로그에 글을 적어보고자 한다.

 

내가 처음 mui를 접하게 된건 부트캠프 기간중 아이콘이나 인풋박스같은 컴포넌트를 개인 프로젝트에 적용하기 위해 사용하게 되었다

 

하지만 지금 다니는 회사에서는 jsx를 이용한 stylecomponent보다는 MUI를 이용한 디자인 컨벤션을 활용하여
전반적인 UI구조를 사용하고있다.

 

mui는 무엇인가?

materialUI 라고 불리던 MUI는 5버전으로 리뉴얼 되면서
기존의 materialUI라는 이름을 버리고 MUI라는 이름으로 바뀌었다.

 

4버전에서는 material의 컴포넌트와 jss를 접목시켜 작동하는 구조였는데
5버전부터는 emotion을 접목시켜 보다 더 스타일드 컴포넌트에 가까워진 녀석이다.

jss가 아닌 emotion을 사용하면서 스타일의 적용방법또한 변경되었는데

기존의 useStyles와 makeStyles가 아닌 컴포넌트 안에서 sx또는 내장된 스타일기능을 적용하여 사용할수 있게 되었다.

알아보기

• materialUI 시절(v4..)의 Docs
  https://v4.mui.com/getting-started/usage/
• MUI로 변한 이후(v5)의 Docs
  https://mui.com/getting-started/usage/

개인적으로 mui를 사용하면서 느낀점은 이전의 버전보다 사용에 편리함이 있다는것을 알수 있다.

 

사전에 정의되어 있는 셋팅값들을 이용하여 간략한 메소드를 통한 스타일의 적용은 mui의 강력한 무기가 되는듯 하다
(그렇다고 css를 너무 등한시 하는것도 좋진 않다고 생각한다.)

 

요즘 내가 가장 많이 사용하는 MUI컴포넌트는 Grid인데 이것은
뷰포트의 가로축을 12등분 하여 영역을 주고 그 영역에 따라 반응형디자인을 보다 쉽게 적용할수 있는 기능을 지원한다.

위의 사진은 MUI에서 제공하는 공식 문서의 내용으로 Grid컴포넌트의 적용 예시를 보여준다.

 

사전에 theme에 적용된 뷰포트 사이즈를 기준으로 그리드의 영역을 지정할수 있으며,

크기에 따라 차등 적용이 가능하여 반응형 구조를 보다 편하게 해줄수 있다.

 

지금 개발중인 프로젝트에서 적용된 모습을 같이 첨부하고싶지만 완성이 된것이 아니기도 하고,

서비스가 되지 않았기에 첨부할수가 없다ㅜㅜ

 

요즘 일하면서 내가 참 많이 부족한것을 느끼는지라 개인 사이드프로젝트를 진행해볼까 하는데
내 사이드 프로젝트에 적용해보면서 앞으로 종종 블로그에 공부한 내용을 업로드 해볼까 한다.

물론! 지금 설명으로는 부족한 MUI에 대해서도!

 

 

블로그 이동에 따른 이전 블로그 글입니다.