Logo

Material UI 소개 및 Typography 컴포넌트 사용법

Material UI는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나입니다. 많은 React UI 컴포넌트 라이브러리는 기존에 있는 CSS 라이브러리를 기반으로 만들어지는 경우가 많습니다. React Bootstrap이 대표적인 예인데요. 이러한 React 라이브러리는 근간이 되는 CSS 라이브러리에 대한 이해나 경험이 없는 경우 여러모로 사용하기 불편한 경우가 많습니다.

하지만 Material UI는 여타 React UI 컴포넌트 라이브러리와 달리 처음부터 React로 만들어졌기 때문에 많은 개발자들에게 좀 더 나은 나은 경험을 제공하고 있는 것 같습니다. 이번 포스팅에서는 Material UI를 설치하고, 텍스트를 위해 사용되는 대표적인 컴포넌트인 <Typography/> 사용법에 대해서 알아보겠습니다.

패키지 설치

Material UI는 core, system, utils, icons 이렇게 여러 개의 패키지로 구성되어 있습니다. 본 포스팅에서는 그 중 핵심적인 기능을 담고 있는 @material-ui/core 패키지만 설치하도록 하겠습니다.

$ npm i @material-ui/core

폰트 불러오기

Material UI는 디폴트로 Roboto 폰트를 사용하고 있습니다. 따라서, index.html 파일의 <head/>에 아래 코드를 추가하여, 웹앱에서 Roboto 폰트를 불러오도록 합니다.

<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  />
</head>

Typography 컴포넌트

웹앱에서 가장 자주 일어나는 일어나는 작업은 텍스트 형태의 정보를 화면에 출력해주는 것일 것입니다. 순수하게 HTML로 마크업을 할 때는 <p/>, <h1/>, <h2/>과 같은 태그를 사용할텐데요. Material UI에서는 <Typography/>라는 하나의 컴포넌트를 사용해서 자유자재로 다양한 스타일의 텍스트를 연출할 수 있습니다.

@material-ui/core 패키지로 부터 <Typography/> 컴포넌트를 불러와서 원하는 텍스트를 감싸주기만 하면 됩니다.

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

export default () => <Typography>텍스트</Typography>;

텍스트의 크기는 variant prop으로 제어할 수 있습니다.

<Typography variant="h1">Heading1</Typography>
<Typography variant="h2">Heading2</Typography>
<Typography variant="h3">Heading3</Typography>
<Typography variant="body1">body1</Typography>
<Typography variant="body2">body2</Typography>

사실 variant prop은 단순히 텍스트의 크기 뿐만 아니라 HTML 태그도 결정을 합니다. 즉, variant="h1"을 사용하면 <h1/> 태그로 마크업이 됩니다.

이러한 variant prop과 상이한 HTML 태그를 사용해야 할 때는 component prop으로 태그명을 명시해주면 됩니다.

<Typography component="h1" variant="h4">
  Title
</Typography>

텍스트는의 색상은 color prop으로 제어할 수 있습니다.

<Typography color="primary">Primary</Typography>
<Typography color="secondary">Secondary</Typography>
<Typography color="textPrimary">Heading3</Typography>
<Typography color="textSecondary">body1</Typography>

align prop을 사용하면 텍스트를 좌측뿐만 아니라, 우측이나 중앙으로도 정렬할 수 있습니다.

<Typography align="center">Center</Typography>
<Typography align="right">Right</Typography>
<Typography color="left">Left</Typography>

전체 코드

본 포스팅에서 작성한 코드는 아래에서 확인하실 수 있습니다.

마치면서

이상으로 Material UI의 설치 방법과 <Typography/> 컴포넌트 사용 방법에 대해서 간단하게 알아보았습니다. 다음 포스팅에서는 Material UI에서 아이콘을 어떻게 사용하는지 알아보도록 하겠습니다.

참고로, 아래 동영상을 통해 최근 5년간 React UI 컴포넌트 라이브러리의 다운로드 트랜드를 쉽게 파악하실 수 있습니다. 😄

This work is licensed under CC BY 4.0

messageCircle