[React] MUI 장점과 단점

Material-UI는 높은 수준의 UI를 빠르고 효율적으로 개발할 수 있는 UI 도구입니다. Material-UI 구글의 Material Design UI 가이드라인을 바탕으로 하며 UI개발에 필요한 수많은 컴포넌트와 디자인 템플릿을 제공합니다. 

Material-UI 장점

1. Material Design을 바탕으로 합니다.
   안드로이드 시스템에서 검증된 높은 수준의 디자인 퀄리티를 바탕으로 UI개발을 진행 할 수 있습니다. 또한 모바일과 데스크톱을 모두 지원하는 반응형 UI를 빠르게 개발할 수 있습니다.
2. 방대한 컴포넌트를 제공합니다.
   필요로 하는 대부분의 컴포넌트를 제공합니다. DatePicker, AutoComplete, Dialog, Tooltip 외 방대한 양의 컴포넌트를 제공합니다. UX PIN과 같은 도구를 활용하면 컴포넌트들을 드래그 앤 드롭만으로 UI를 개발할 수 있을 정도로 충분한 컴포넌트가 제공됩니다. [UXPin DesignTool]
3. 리액트와 높은 호환성을 자랑합니다.
   리액트와 높은 호환성과 높은 수준의 퀄리티를 제공하기 때문에 세계적으로 널리 사용되는 도구입니다. 이미 신뢰성이 충분히 검증되었으며 방대한 개발자 자료와 도구들을 바탕으로 빠르게 리액트 앱을 개발할 수 있습니다.

Material-UI 단점

1. 모바일과 터치 사용자에 최적화 되어 있습니다.
   Material Design은 안드로이드를 위해 만들어진 디자인 철학입니다. 터치사용자를 위해 글꼴은 큼직하고 UI간에는 충분한 여백이 존재합니다. 이러한 디자인은 키보드와 마우스를 사용하는 데스크톱 환경에 최적화된 특징이 아닐수 있습니다.
2. 컴포넌트들이 무겁습니다.
   Material Design 가이드를 준수하기 위해 컴포넌트가 무겁고 복잡하게 구성되어 있습니다. 예를들어 텍스트박스 하나를 표현하는데도 최소 3~5개의 HTML Element가 생성되며 수많은 시각적 CSS요소와 애니메이션, JavaScript 이벤트가 실행됩니다. 작은 쇼핑몰 수준의 앱, 랜딩페이지, 모바일 앱 수준의 소규모 웹어플리케이션에서는 충분히 만족스러울 수 있습니다.

   <!-- Material-UI에서 DropDownList 하나를 출력하기 위해 생성하는 HTML Element -->
   <div class="MuiFormControl-root">
       <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl">
           <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input" tabindex="0" role="button" aria-haspopup="listbox">Status...</div>
           <input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="-1" />
           <svg class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
               <path d="M7 10l5 5 5-5z"></path>
           </svg>
           <fieldset aria-hidden="true" style="padding-left: 8px;" class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline">
               <legend class="PrivateNotchedOutline-legend-8" style="width: 0.01px;">
                   <span>​</span>
               </legend>
           </fieldset>
       </div>
   </div>
   

   하지만 규모가 큰 기업용 웹어플리케이션에서는 속도저하가 심각한 문제로 다가오게 됩니다. 한 화면에 수백건의 주문과 결제를 관리해야하는 화면, 한화면에 수많은 수치정보를 표현하고 처리해야하는 비지니스 어플리케이션에는 적합하지 않은 선택일 수 있습니다. 중대규모 엔터프라이즈용 어플리케이션이라면 상대적으로 가벼운 ANT Design이나 Reactstrap이 더 나은 선택 일 수 있습니다.
3. 커스터마이징이 상대적으로 어렵습니다.
   Material-UI에서 제공하는 Material Design 가이드와 개발 원칙을 준수한다면 빠르게 UI를 개발할 수 있지만, 반대로 말하면 너무 Material Design에 최적화되어 있어 커스터마이징에 한계가 있습니다. 하나의 Button 조차 2~3개의 HTML Element와 수십개의 CSS 요소가 사용되기 때문에 이를 커스마이징 하려면 더 많은 코드를 작성해야합니다.