Material-UI

Material Design에 대해 알아보자.

머티리얼 디자인이란 구글에서 공개한 디자인 가이드이다. 목적은... 공식 홈페이지에 영어로 장황하게 설명이 되어 있지만 핵심은 딱 하나

"빠르고 쉽게 웹 개발을 해라(해야한다) 너만의 시스템을 디자인 해봐라~"

실무나 프로젝트에서 자주 사용되는 기능과 디자인들을 Component/API로 제공해준다. 사용할 때는 라이브러리를 import 해주고 그냥 바로 가져다 쓰면 된다.

이를 통해 React로 개발을 할 때 다양한 UI를 쉽게 만들 수 있다. (앵귤러나 뷰도 가능하다) 기능적인 Ui를 제공해 주면서도 내 프로젝트에 맞게 커스터마이징할 수 있다는 게 아주 큰 장점이다. (scss로 스타일을 모듈화하여 머티리얼 디자인을 적용가능하다고 한다)

실제로 사용해보니 진짜 말도 안되게 편하다.

사실 이전에 냉장고(Refri Bank)를 개발할 때 사용을 했었던 기억이 어렴풋이..!! 아마 그 때.. 모달창이었나 어럴트창이였나 아무튼 잘 기억은 안나지만 이걸 썼던 것 같다.

조금 있으면 졸과를 제대로 시작할텐데 잘 활용하면 시간을 매우 단축시킬 수 있을 것 같다.

<설치 방법>

@material-ui/core

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
@material-ui/icons

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

Material 에서 제공하는 아이콘도 같이 사용하고 싶다면 같이 install 해주자.

리액트의 버전이 안맞아서 에러가 뜰 수 있는데 더 좋은, 확실한 해결 방법이 있겠지만 지금은 그걸 공부하는 게 아니므로 !!

그냥 --force 옵션을 넣어줘서 install 진행

// TopHeader 파일

import React from "react";
import { useState } from 'react';
import { AppBar, Tabs, Tab } from "@material-ui/core";
import { Home, Send, Person, CheckCircle, CheckCircleOutline} from "@material-ui/icons";



const TopHeader = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="Main Tabs">
          <Tab label="아니" icon={<Home />} />
          <Tab label="이게" icon={<Send />}/>
          <Tab label="된다고?" icon={<Person />}/>
          <Tab label="졸라 편하잖아" icon={<CheckCircle />}/>
          <Tab label="베리 굿" icon={<CheckCircleOutline />}/>
        </Tabs>
      </AppBar>
    </>
  );
};

export default TopHeader;

App.js 에서는 평소에 컴포넌트를 사용하듯이 그냥 쓰면 된다(?)

import TopHeader from './Material_UI/materialUI_01';

~~~
  
  return (  
    <React.Fragment>
      	<TopHeader/>
    ~~~

TopHeader 코드에서 다른 부분은 다 보자마자 이해가 될텐데

<Tabs value={value} onChange={handleChange} aria-label="Main Tabs">

이 부분은 탭을 클릭하거나 이동할 때 밑에 빨간 줄이 생기는 부분에 대한 코드이다.

import { Home, Send, Person, CheckCircle, CheckCircleOutline} from "@material-ui/icons";

다음과 같은 코드를 추가하여(라이브러리 import해주고) 탭에 아이콘도 적용이 가능하다.

결과는 놀라울 정도로... 좋다. 아니 이쁘다.

이걸 리액트로 혹은 바닐라 JS로 구현을 할 생각을 하면... 아찔하다. (물론 지금까지는 직접 다 코드를 짜왔지만...?)

위의 예제는 TopHeader(상단 헤더 카테고리 바)이지만 이거 말고도 유용한 컴포넌트가 엄청나게 많다.

1. Layout
   반응형 대응과 컴포넌트의 위치나 정렬 등

2. Inputs
   입력 관련 기능들의 컴포넌트 (Button, Checkbox, Radio 등)

3. Navigation
   웹사이트 이동을 도와주는 내비게이션 (Menu, Tabs 등)

4. Surfaces
   모바일 환경에서 특히 중요한 기능들 (AppBar, Card 등)

5. Feedback
   유저에게 상황을 설명하는 것들 (Progress뺑뺑이, Snackbar 등)

6. Data Display
   데이터를 화면에 표현하는 기능들
   이미 익숙한 Icons, List, Table, Typography (text) 등 Output 요소

7. Utils
   그 외 나름 유용하고 쓸만한 기능들 (Modal, TextareaAutosize 등)

8. Lab
   아직은 개발 중이거나 실험 중인 컴포넌트들
   Autocomplete, Data Grid, Pagination, ToggleButton 등등

다 쓰지도 않을 꺼 미리 해보는 건 시간이 좀 아깝고, 필요한 상황이 생기면 그 때 그 때 찾아서 공부하고 프로젝트에 적용하자.

---

추가

해당 내용을 공부하고 git에 commit, push 한다면? 바로 에러가 뜰 것이다.

github 에러

remote: error: this exceeds GitHub's file size limit of 100 MB

해당 에러 해결은 notion에 [Error Collection] 에다가 따로 정리를 해놓았다. 이거 때문에 5시간 삽질했다.

깃헙은 정말 어마무시하다. 너무 심심하고 시간이 잘 안가는 사람이 있다면 깃헙 에러 하나 던져주고 싶다. 행복에 겨워 발버둥치다 죽어버리고 싶을 수도