Matrial UI

Intro

회사에서 채팅 웹앱을 만들어야 해서 괜찮은 React 라이브러리를 찾아야 해서 검색을 해봤는데 센드버드나 stream chat 같은 라이브러리 들은 매우 쉽게 구성할 수 있게 되어 있지만 상업적으로 사용하려면 라이센스 비용을 지불해야 해서 다른 좋은 라이브러리가 없나 싶어서 찾다가 괜찮은 라이브러리를 발견하게 되어 여기에 기록한다.

Metrial UI 설치

# with npm
npm install @material-ui/core

# with yarn
yarn add @material-ui/core

그리고 Metrial UI 같은 경우에는 아이콘을 매우 손쉽게 사용할 수 있도록 아이콘들을 제공한다. SVG 아이콘을 이용하고 싶으면 아래의 명령어를 입력해 설치한다.

# with npm
npm install @material-ui/icons

# with yarn
yarn add @material-ui/icons

Metiral Icon

아이콘의 경우에는 공식 페이지에서 아이콘을 찾는 방법이 있는데,
Metrial Icon search
위의 링크로 들어가게 되면 SVG Icon을 검색해서 찾을 수 있고, 꽤 다양하고 깔끔한 아이콘이 있어서 좋다. 그리고 무엇보다 쓰기도 편하게 되어있다.
예를 들면

import React, { useState, useEffect } from "react";
import { InputAdornment, TextField, Button } from "@material-ui/core";
import io from "socket.io-client";
import SendIcon from "@material-ui/icons/Send";
import styles from "./Form.module.scss";

이런식으로 임포트해서 기능들을 사용할 수 있으니 참고하자.

Reference

Metrial-UI
Metrial Icon search