[React] UI 라이브러리

Onsen UI

UI 라이브러리

스타일링 된 컴포넌트 제공

 

기본적인 기능

제공(ex. Action Sheet)

 

JS / VUE / React / Angular

모두 서포트 가능하다

 

모바일 대응

안드로이드 / 아이폰 대응

 

다양한 컴포넌트

모바일 케이스 대응

 

아이콘

Font-awesome / Ionicons

 

문서 최신화

잘 안되는 듯 (React에 불친절)

Ant Design

React

리액트를 베이스로 하는 디자인, 그렇기에 공식문서를 복사해서 붙여넣기 하면 된다.

 

Day.js

Ant Design도 Moment.js를 제거하는 것을 지향하며, Day.js를 사용할 때 해당 라이브러리를 추천한다.

 

Design 철학

단순한 컴포넌트 제공 + @

 

Typography

다양한 사이즈의 Text

 

Layout

화면 구조를 간편하게 배치

 

다양한 Component

복붙만으로 화면 구성 가능

 

문서를 읽는 방법

익히기 좋은 성격의 구조

React Semantic UI

Semantic Web

웹의 접근성에 관련된 내용들

 

JQuery 기반 Semantic UI 

리액트용으로 제공

 

Try It

공식문서에서 코드를 변경함으로써, 변경을 바로바로 확인 가능

 

as props

Semantic한 tag로 바로 사용 가능

 

Comment / Feed

다 만들어진 상태로 제공

 

다양한 컴포넌트

웹 서비스 구성에 필요한 거의 모든 컴포넌트를 제공한다.

 

여러 컴포넌트 조합

visibility + progress

React Bootstrap

반응형 웹 

xs / md / lg

 

Sass

@import 해서 사용 가능하다.

 

익숙한 UI

Bootstrap을 그대로 가져올 수 있다.

 

컬러 시스템

통일성 있음

 

Admin 

Admin 페이지에서 자주 본 스타일

 

Utilities

Transitions / Ratio

Material UI

Materical Design

구글이 선도한 디자인 시스템

 

다양한 서포트

Example Project / Design tools

 

FAQ 

실무 과정에서 마주할 이슈들을 정리 잘 해놓았다.

 

Layout / Theme

이미 체계화된 시스템

 

API 구성

Components  / API 로 구성이 되고, 이에 따른 Demo를 제공

 

makeStyles

컴포넌트의 구조를 관장한다.

 

Virtual List

Virtual Scroll

 

System

순수한 커스텀 컴포넌트 생성 가능

Tailwind CSS

컴포넌트

일부를 무료로 제공하고, 나머지 일부는 유료로 제공을 한다.

 

class

스타일 요소를 모두 제공한다.

 

Tiny

빌드할 때는 사용하는 클래스만 빌드해서 패키지를 만들어주기 떄문에 Tiny 하다.

 

Intelli Sense

VS Code에서의 Extension을 제공해주기 때문에 클래스명을 가져다 쓰기 용이하다.

 

Utility First

클래스 이름 생성 X / CSS 추가 X (웹에서 복붙해서 사용할 수 있도록 설계)

 

다크모드 

대응 용이 (media / class)

 

Customize

configuration 차원에서

 

대부분의 css

커버 가능 (but 예제는 아쉽다)

React Spring

물리 엔진을 통해 좀 더 나은 애니메이션

 

hooks

use {*}

 

animated

Outside React에 있는 동작을 해준다.

 

Framer Motion

 

Framer

Design + Frontend Tool

 

Motion

Animation 기능이 들어간 Component

 

Variants

Propagation / Orchestration

(자식들에게 값을 알려주거나, 체이닝을 통해 같이 동작하게하는 기능이 가능)

 

Gestures / MotionValue

편의 기능들 제공