프론트엔드

Material UI - 소개 및 Typography

개발찾아 삼만리 2024. 8. 13. 09:34

Material UI(MUI)는 Google의 Material Design을 구현하는 오픈소스 React UI 구성 라이브러리이다.

현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나이다.

 

패키지 설치

Material UI는 core, system, utils, icons 등 여러 개의 패키지로 구성되어 있다.

핵심적인 기능을 담고있는 @material-ui/core

$ npm i @material-ui/core

 

 - React 18과 Material-UI v4 호환 문제 : Material-UI v4는 React 18과 호환되지 않아, v5로 업그레이드

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

 

폰트 불러오기

Material UI는 기본적으로 Roboto 폰트를 사용하고 있다.

index.html 파일의 <head>에 폰트 링크를 추가한다.

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

 

Typography 컴포넌트

HTML로 마크업을 할 때는 <h1>, <h2>, <p>와 같은 태그를 사용하지만,

Material UI에서는 <Typography>라는 하나의 컴포넌트를 사용해서 자유자재로 다양한 스타일의 텍스트를 연출할 수 있다.

// @material-ui/core 패키지로부터 <Typography/> 컴포넌트를 불러와서 원하는 텍스트를 감싸주기만 하면 된다.
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 태그를 사용해야 할 때는 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>

 

[출처]
https://www.daleseo.com/?tag=MaterialUI