Reactjs

React를 위한 상위 컴포넌트 라이브러리 비교

조회 454 (작성일 2020.08.13 11:05)
- 음성
- 목록
- - 검색

모든 심각한 웹 애플리케이션에 대해 구성 요소 라이브러리를 선택해야 합니다.

아주 좋은 기성품 라이브러리가 있는데 왜 바퀴를 재발 명할까요? 이 기사에서는 간단한 로그인 화면을 만들어 React의 상위 5 개 구성 요소 라이브러리를 비교합니다.

https://www.tderflinger.com/en/top-components-libs-comparison

Material UI

Material Design은 2014 년 Google에서 개발한 디자인 언어입니다. Google은 Android 운영 체제와 자체 제품에서 이를 사용합니다.

Material UI는 React를 위한 Material Design을 구현합니다. 매우 인기 있는 React 라이브러리이며 파리에 기반을 둔 회사에서 지원합니다.

스타일링을 위해 라이브러리는 자체 CSS-in-JS 솔루션 및 스타일 구성 요소를 사용합니다.

또한 테마를 조정할 수 있는 가능성도 있습니다. 전반적으로 강력한 라이브러리이며 Material Design 언어가 마음에 들면 제품을 구축 할 수 있는 포괄적 인 솔루션을 얻을 수 있습니다.

Material UI screenshot

// taken from https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in

import React from 'react'
import Avatar from '@material-ui/core/Avatar'
import Button from '@material-ui/core/Button'
import CssBaseline from '@material-ui/core/CssBaseline'
import TextField from '@material-ui/core/TextField'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
import Typography from '@material-ui/core/Typography'
import { makeStyles } from '@material-ui/core/styles'
import Container from '@material-ui/core/Container'

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}))

export default function SignIn() {
  const classes = useStyles()

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
        </form>
      </div>
    </Container>
  )
}

Fluent UI React

Fluent는 Microsoft에서 만든 오픈 소스 및 크로스 플랫폼 디자인 시스템입니다. Fluent UI React는 React 웹 개발자를 위한 Fluent 시스템의 구현입니다. Fluent UI React 웹 사이트에는 모범 사례 권장 사항이 포함 된 좋은 문서가 있습니다.

또한 TypeScript에 대한 최고 수준의 지원이 있습니다. 테마를 위해 대화식으로 테마를 사용자 지정할 수 있는 Fluent UI 테마 디자이너 웹 사이트가 있습니다.

전반적으로 디자인이 마음에 든다면 Fluent UI를 사용하는 데 아무런 문제가 없습니다.

Fluent UI screenshot

import * as React from 'react'
import { Card } from '@uifabric/react-cards'
import { TextField } from 'office-ui-fabric-react/lib/TextField'
import { Text } from 'office-ui-fabric-react'
import { PrimaryButton } from 'office-ui-fabric-react'

const Login = () => {
  const cardTokens = { childrenMargin: 20, width: 500, maxWidth: 400 }

  return (
    <Card
      aria-label="Basic vertical card"
      tokens={cardTokens}
      style={{
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: '10rem',
      }}
    >
      <Card.Section>
        <Text
          block
          variant="xLarge"
          style={{ textAlign: 'left', marginBottom: '2rem' }}
        >
          Sign In
        </Text>
        <TextField underlined placeholder="Email address" />
        <TextField underlined type="password" placeholder="Password" />
        <PrimaryButton text="SIGN IN" style={{ marginTop: '3rem' }} />
      </Card.Section>
    </Card>
  )
}

export default Login

Ant Design

중국의 대기업 인 앤트 파이낸셜의 디자인 시스템은 오픈 소스 다. Ant Financial은 대형 전자 상거래 회사 인 Alibaba와 제휴합니다. Tencent 및 Baidu와 같은 다른 많은 주요 중국 인터넷 회사도 이 디자인 시스템을 사용하고 있습니다.

라이브러리 Ant Design은 포괄적이며 다양한 구성 요소를 갖추고 있습니다. 문서는 좋지만 일부 페이지는 여전히 중국어로만 제공됩니다. TypeScript가 지원되며 Less 변수를 사용하여 테마를 지정할 수 있습니다.

이 도서관은 중국의 주요 인터넷 회사가 지원하므로 주변에 머물 것입니다.

Ant Design screenshot

import React from 'react'
import { Card } from 'antd'
import { Input } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { LockOutlined } from '@ant-design/icons'
import { Button } from 'antd'

const Login = () => {
  return (
    <>
      <Card
        title="Login"
        style={{
          width: 300,
          marginLeft: 'auto',
          marginRight: 'auto',
          marginTop: '5rem',
        }}
      >
        <Input placeholder="Email Address" prefix={<UserOutlined />} />
        <Input
          placeholder="Password"
          type="password"
          style={{ marginTop: '1.5rem' }}
          prefix={<LockOutlined />}
        />
        <Button type="primary" style={{ width: '100%', marginTop: '1.5rem' }}>
          SIGN IN
        </Button>
      </Card>
    </>
  )
}

export default Login

React Spectrum

Adobe는 Spectrum이라는 오픈 소스 디자인 시스템을 만들었습니다. PhotoShop 및 Illustrator와 같은 잘 알려진 소프트웨어 디자인 제품의 개발자로서 그들은 훌륭한 디자인에 집중했습니다.

Spectrum이 다른 디자인 시스템과 상쾌하게 다르게 보이기 때문에 그것은 빛을 발합니다. 구성 요소의 구성에서 조화 감을 느낄 수 있습니다.

Spectrum의 React 구현을 React Spectrum이라고 합니다. React Spectrum의 초점은 모든 구성 요소가 지원하는 접근성입니다. 문서는 훌륭하며 React Spectrum은 국제화 지원도 제공합니다. 디자인 시스템 관리를 위한 React 후크 모음 인 React Stately도 있습니다. 테마는 자동 어두운 모드와 함께 지원됩니다.

React Spectrum은 디자인 측면에서 돋보이기를 원하는 웹 애플리케이션에 매우 적합합니다.

Spectrum screenshot

import React from 'react'
import { Flex, Heading, View, TextField, Button } from '@adobe/react-spectrum'

const Login = () => {
  return (
    <Flex
      direction="column"
      justifyContent="center"
      alignItems="center"
      height={window.innerHeight + 'px'}
    >
      <View
        borderWidth="thin"
        borderColor="dark"
        borderRadius="medium"
        padding="size-250"
        width="300px"
      >
        <Heading level={2}>Sign In</Heading>
        <TextField label="Email Address" placeholder="xyz@mail.com" />
        <TextField label="Password" type="password" />
        <Button variant="cta" marginTop="size-130">
          SIGN IN
        </Button>
      </View>
    </Flex>
  )
}

export default Login

Semantic UI React

시맨틱 UI React에는 컴포넌트 라이브러리에서 기대할 수 있는 모든 것이 있습니다. 50 개 이상의 구성 요소와 좋은 테마 개념이 있습니다. 커뮤니티 프로젝트로서 그것은 기여에 달려 있습니다. 그러나 이 글을 쓰는 시점의 마지막 커밋은 2 년 전인 2018 년이었습니다. 그래서 이 프로젝트에는 유감스러운 활동이 없는 것 같습니다.

Semantic UI screenshot

import React, { useState } from 'react'
import { Grid, Form, Segment, Button, Header, Message } from 'semantic-ui-react'

const Login = () => {
  return (
    <>
      <Grid
        textAlign="center"
        verticalAlign="middle"
        style={{ marginTop: '7rem' }}
      >
        <Grid.Column style={{ maxWidth: 450 }}>
          <Header as="h2" icon color="blue" textAlign="center">
            Sign In
          </Header>
          <Form size="large">
            <Segment stacked>
              <Form.Input
                fluid
                name="email"
                icon="mail"
                iconPosition="left"
                placeholder="Email address"
              />
              <Form.Input
                fluid
                name="password"
                type="password"
                icon="lock"
                iconPosition="left"
                placeholder="Password"
              />
              <Button color="blue" fluid size="large">
                SIGN IN
              </Button>
            </Segment>
          </Form>
          <Message>
            Not a user? <a href="register">Register here.</a>
          </Message>
        </Grid.Column>
      </Grid>
    </>
  )
}

export default Login