Material UI 활용기

안녕하세요. 휴몬랩 개발자 진(JIN)입니다:) Material UI는 많이 쓰이는 React UI 컴포넌트 라이브러리 중 탑 3안에 계속 들어가는 라이브러리입니다. 저희도 Material UI를 역시 적극 활용해서 개발하고 있습니다. Material UI를 이용해 컴포넌트를 커스텀해서 재사용한 컴포넌트를 만들어 놓아 빠르게 UI 구현을 할 수 있다는 점에서 좋았습니다.

 

패키지 설치

 npm i @material-ui/core

Material UI는 core , utils , icons 같은 여러 개의 패키지들이 있는데 그중 핵심적인? 컴포넌트들을  제공하는 core를 설치하겠습니다. 그리고 core의 컴포넌트를 몇 가지 알아보겠습니다. 기타 여러 가지 컴포넌트는 도큐먼트를 참조하시면 더 다양한 UI 컴포넌트를 확인할 수 있습니다.

 

Typography

텍스트 형태를 화면에 출력해주는 Typography컴포넌트를 예시로 들겠습니다. 순수한 HTML 표준 마크업을 할 때  <p />, <h1 />, <span /> 같은 태그를 사용하지만, <Typography />라는 하나의 컴포넌트를 이용해 다양한 스타일의 텍스트를 연출할 수 있습니다.

 

import React from "react"
import { Typography } from "@material-ui/core"

const Exam = () => {
	return(
    	<Typography variant="h1">Heading1</Typography>
		<Typography variant="h2">Heading2</Typography>
		<Typography variant="h3">Heading3</Typography>
    )
}

간단하죠? variant는 도큐먼트에서 확인할 수 있듯이 제공해주는 prop입니다. 텍스트의 크기와 HTML의 태그도 결정해 줍니다. variant가 h1인 첫 번째 컴포넌트는 실제로 렌더링 되어 <h1 />으로 마크업 되는 것입니다. 이외에도 color, align 같은 prop 등 제공하는 prop이 많이 있으므로 확인하면서 필요한 prop을 커스텀해서 사용하면 좋겠습니다. 

 

Material UI + styled-component

material UI와 styled-component 모두 CSS in JS의 개념으로 JS로 작성된 컴포넌트에 바로 스타일을 정의하는 방법입니다. 그렇다면 Material UI와 styled-component를 같이 사용하는 방법을 알아보겠습니다.

 

import React from "react";
import styled from "styled-components";
import MUITypography from "@material-ui/core/Typography";

const Typography = styled(
  ({
    fontSize,
    lineHeight,
    ...props
  }) => <MUITypography {...props} />
)`
  ${({ fontSize }) => fontSize && `font-size: ${fontSize}px;`}  
  ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight};`}

`

styled로 태그를 괄호로 감싸서 사용할 수 있습니다. props에 따라 다를 스타일을 적용하도록 만들었습니다. 이렇게 만들어 놓으면 가장 기본(원소 컴포넌트)으로 만들어 놓고 다양한 컴포넌트에서 props만 바꿔 전달해서 사용할 수 있어서 빠르게 UI구현할 수 있었습니다.

 

Typescript 끼얹기

import React from "react";
import styled from "styled-components";
import MUITypography from "@material-ui/core/Typography";

type Props = {
  fontSize?: number;
  lineHeight?: number;
};

const Typography = styled(
  ({
    fontSize,
    lineHeight,
    ...props
  }) => <MUITypography {...props} />
)<Props>`
  ${({ fontSize }) => fontSize && `font-size: ${fontSize}px;`}  
  ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight};`}

`

hoxy...타입스크립트를 사용한다거나 사용할 예정이라면 type에 대한 정의를 해줘야 합니다. type이나 interface를 이용해서 prop에 대한 타입 체크를 해주시면 됩니다! 그리고 컴포넌트에 <>로 해당 타입을 추가해주면 Typescript를 사용하는 곳에서도 커스텀해서 사용할 수 있게 됩니다. 

 

정리

Bootstrap같은 CSS 라이브러리는 사용한 경험은 있었지만, 이렇게 React로 처음부터 만들어진 라이브러리는 React를 접하고 처음 써봤습니다. Bootstrap은 속성 주는 데도 안 먹는 경우도 있었는데 Material UI는 호환성도 좋고 개발자들에게 더 나은 경험을 제공하려고 노력한 라이브러리 같습니다. 가장 기본적인? 컴포넌트를 예시로 들었는데 TreeMenu 같은 복잡하고 멋진 컴포넌트들도 제공하니 문서를 참조하고 적극 활용해서 개발하시면 더 멋진 웹 애플리케이션을 만들 수 있지 않을까 싶습니다.

 

[참고]

https://material-ui.com/