[React] Material UI란? _ Tabs 컴포넌트 예시

안녕하세요-! 오늘은 리액트 개발에서 사용할 수 있는 자바스크립트 라이브러리인 Material-UI를 소개하려고 합니다

리액트 개발을 할 때, 디자인/UI,UX에 대한 퀄리티를 높일 수 있는 편한 라이브러리입니다!

다양한 컴포넌트와 탬플릿을 보유하고 있어 활용도가 높은 라이브러리입니다.

---

React CSS 라이브러리

react에서 css에 사용할 수 있는 여러가지 라이브러리가 있습니다

대표적인 라이브러리로 Bootstrap, Material UI, antd 세 가지가 가장 많이 쓰였습니다-!

저도 프로젝트에 적용하기 위해, 어떤 라이브러리를 선택할지 고민을 많이 했었는데요, 

어떤 것이 현재 가장 많이 쓰이는지 통계 자료로 알아보았습니다.

 

Bootstrap vs Material UI vs antd

 

npm trends에서 통계 자료를 봤을 때, 

그래프를 보면 Material UI가 2019년 이후로는 가장 높은 순위를 지켜왔는데, 여기 나타난 Material UI의 패키지가 2021년 하반기에 나온 새로운 버전의 패키지명(@mui)이기 때문에 순위에서 잠깐 밀린 것처럼 보이긴 합니다.

하지만 지금 시점에는 Material UI가 1위 자리를 다시 지키고 있으며, 다음으로 React Bootstrap이 2위, Ant Design이 3위를 차지하고 있습니다.

 

 

따라서 저는 가장 많이 사용되고 있는 MUI 라이브러리를 프로젝트로 적용하기로 하였습니다-! 😎

 

MUI란?

 

Material UI는 Google의 Material Design을 구현하는 오픈 소스 React component library로서, HTML-CSS의 컴포넌트를 불러와 사용하는 CSS라이브러리입니다.

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

 

class로 적용했던 CSS 속성을 props를 통해 선택할 수 있으며, 빠르고 간편한 개발의 장점을 갖고 있으며 전적으로 CSS 코드로 작성되어 있다는 특징을 가지고 있습니다

 

컴포넌트 제공

input창과 Data display 컴포넌트

 

input창, 버튼, 토글, 체크박스, 아이콘 등 다양한 컴포넌트들이 마련되어 있어 쉽게 가져와 사용할 수 있습니다.

공식 문서에 컴포넌트 별로 활용 방법 및 예시가 잘 나와있어 사용하기도 어렵지 않았습니다!

 

다양한 템플릿

 

또, 컴포넌트들 뿐만 아니라 템플릿을 통째로 사용할 수 있다는 장점도 있었습니다

저는 프로젝트에서 이미 설계해놓은 UI가 있어 템플릿을 사용하지는 않았지만, 대시보드 블로그 등 템플릿과 맞는 페이지를 개발하시려고 하신다면 템플릿을 활용해 변형하시는 것도 개발을 쉽고 편리하게 할 수 있을 것 같습니다!

 

• 대시보드, 랜딩 페이지, 로그인 및 가입 페이지, 블로그, 체크아웃 플로우 등의 템플릿 포함
• 템플릿 전체를 사용해도 되지만 템플릿의 부분만을 다른 페이지에서 쉽게 재사용 가능하다는 장점

---

설치

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

 

우선 npm install을 이용해 설치를 해줍니다.

mui 라이브러리와 함께 emotion 라이브러리도 설치해줍니다.

Emotion이란 styled component과 비슷한 CSS in JS 라이브러리이며, MUI는 Emotion-based Styling 를 사용하기 때문입니다 

Import 후 사용하고 싶은 컴포넌트에 불러와서 사용

 

Import 한 후 사용하고 싶은 컴포넌트에 불러와서 사용하면 됩니다.

위의 예시에서는, Button을 import 해 주었고, <Button></Button> 태그를 이용해 버튼을 불러와준 예시입니다.

---

프로젝트에 적용: 

 

공식문서에 보면, 위처럼 다양한 컴포넌트를 활용할 수 있습니다.

 

Overview - Material UI

 

저는 Tabs라는 컴포넌트를 프로젝트에 적용해보겠습니다. 

React Tabs component - Material UI

 

import

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

 

필요한 컴포넌트인 Tabs, Tab, Box를 import합니다. 

Box는 Tabs를 감싸기 위해 사용한 컴포넌트이며 필요에 따라 사용하면 됩니다-!

 

Tabs 구성

          <Tabs value={value} onChange={handleChange} aria-label="follow/following tabs">
            <Tab label="팔로우" {...a11yProps(0)} />
            <Tab label="팔로잉" {...a11yProps(1)} />
          </Tabs>

 

저는 팔로우 Tab, 팔로잉 Tab 두 가지로 구성된 Tabs를 사용하였습니다.

<Tab>으로 각 탭들을 넣어준 후, <Tabs>로 감싸주면 됩니다.

• Tabs 컴포넌트는 value를 통해 현재 활성화된 탭을 관리하고, onChange 이벤트를 통해 탭 변경을 처리합니다.
• 각 Tab 컴포넌트는 label 속성을 통해 표시될 텍스트를 정의하고, a11yProps 함수를 통해 접근성 속성을 설정합니다.

 

전체 코드

/** @jsxImportSource @emotion/react */

import React from "react";
import { css } from "@emotion/react";
import PropTypes from 'prop-types';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

function CustomTabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
}

CustomTabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.number.isRequired,
  value: PropTypes.number.isRequired,
};

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

export default function Bookmark() {
  const [value, setValue] = React.useState(0);

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

  return (
    <div
      css={css`
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      `}
    >
      <Box sx={{ width: '100%', maxWidth: '600px' }}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs value={value} onChange={handleChange} aria-label="follow/following tabs">
            <Tab label="팔로우" {...a11yProps(0)} />
            <Tab label="팔로잉" {...a11yProps(1)} />
          </Tabs>
        </Box>
        <CustomTabPanel value={value} index={0}>
          팔로우 목록
        </CustomTabPanel>
        <CustomTabPanel value={value} index={1}>
          팔로잉 목록
        </CustomTabPanel>
      </Box>
    </div>
  );
}

 

적용된 모습

 

 

 

각 팔로잉 목록/팔로우 목록 부분에 원하는 내용을 채워 넣으면 됩니다-!

---

📌 참고 링크

MUI: The React component library you always wanted

 

[MUI - Material UI] Material UI란?

 

[UI] Material UI란?