베스트 10 리액트 UI 라이브러리(10 Best React UI Library)

리액트(React) 기반으로 제작된 UI 라이브러리를 조사해 봤습니다. 선정 기준은 현재도 활발하게유지/개발이 진행 되고 있고, 프로덕션에 적용 가능한 라이브러리 위주로 선택 했습니다. 프로토타이핑이나 UI에 약한 분이라면 한번 고려해보시면 좋을것 같네요.

1. Material-UI

• Star: 25,561

• Version: 0.18.1

• License: MIT

설명: 리액트 기반 UI 라이브러리 중에 가장 인기 있고, 성숙한 라이브러리 입니다. 구글 머테리얼 디자인 기반으로 제작 되었습니다. 현재 릴리즈 버전은 0.18x이고, 1.x alpha 버전이 개발 중에 있습니다. 하지만, 1.x 버전 부터는 변경되는 컴포넌트 API가 많기 때문에 버전 선택에 신중해야 할 것 같습니다. 1.x 버전은 여기에서 확인 할 수 있습니다. 현재 stable 버전에서는 inline style을 사용하고 있어, 컴포넌트 커스터마이징 하는게 생각보다 쉽지 않습니다. 1.x 버전에서는 스타일링을 jss를 기반으로 변경 했습니다.

2. React Toolbox

• Star: 6,168

• Version: 2.00-beta6

• License: MIT

설명: 리액트 툴박스(react-toolbox) 역시 머테리얼 디자인을 기본으로 한 UI 라이브러리 입니다. Material-UI와 다른점은 스타일을 CSS Module을 사용하여 테마 적용과 커스터마이징이 더 쉽다는 점 입니다. 하지만, 아무래도 Material UI 보다는 컴포넌트 종류와 예제가 많지 않고, CSS Module을 사용하기 때문에 설정(configuration)이 다소 복잡 하다는 단점이 있습니다.

3. React Bootstrap

• Star: 9,790

• Version: 0.31.0

• License: MIT

설명: 웹 UI 라이브러리로 전세계에서 가장 많이 사용되는 Bootstrap을 리액트 기반으로 변경한 라이브러리 입니다. 주의할 점은 이 라이브러리는 Bootstrap 3.x 버전을 기반으로 제작되었습니다. Bootstrap v4 alpha 버전이 적용된 리액트 라이브러리는 아래의 reactstrap을 사용 하셔야 됩니다.

4. reactstrap

• Star: 1,485

• Version: 4.6.1

• License: MIT

설명: 위에서 설명한 react-bootstrap이 Bootstrap 3.x 버전을 적용한 라이브러리라면 이 라이브러리는 Bootstrap 4.x alpha 버전을 적용한 라이브러리 입니다.

5. Blueprint

• Star: 6,135

• Version: 1.17.1

• License: BSD

설명: 리액트 기반으로 제작된 UI 툴킷(toolkit) 입니다. 리액트를 기반으로하는 웹 어플리케이션을 제작 하시려고 한다면 고려해볼만한 라이브러리 입니다. 다른 UI라이브러리와 다르게 tree, context menu, hot keys 등의 웹 어플리케이션에서 사용되는 컴포넌트들을 다수 제공 하고 있습니다.

6. Ant Design

• Star: 13,548

• Version: 2.10.1

• License: MIT

설명: 리액트와 타입스크립트(Typescript) 기반으로 제작된 UI라이브러리 입니다. 중국회사에서 오픈소스화한 라이브러리 인데, 깃헙 스타 수에 비해 많이 사용되고 있는 것 같진 않습니다. 문서와 예제는 자세히 되어 있어서 적용 하는데에는 문제는 없어 보입니다.

7. react-materialize

• Star: 507

• Version: 0.18.4

• License: MIT

설명: Materialize 라이브러리를 리액트 기반으로 변경한 라이브러리 입니다. Materialize의 인기에 비해 리액트 기반으로 제작된 이 라이브러리는 크게 인기가 있어 보이진 않습니다. 아무래도 Material-UI나 react-toolbox 같은 라이브러리가 있기 때문일 것 같은데, Materialize를 리액트에서 사용 하시고 싶은 분이라면 한 번 고려해볼만 합니다.

8. Grommet

• Star: 1,838

• Version: 1.4.0

• License: Apache License 2.0

설명: 리액트 기반의 UI 라이브러리 입니다. 조금 생소한 라이브러리 입니다. 저도 이번에 조사하면서 알게 됐는데, 컴포넌트 종류가 다양하고, 무척 깔끔합니다. 또한, 다른 UI 라이브러리엔 포함되지 않는 차트 컴포넌트가 기본으로 제공 되고 있습니다. 독특한 점은 Sketch 파일도 제공하고 있다는 게 눈에 띄네요.

9. Semantic-UI-React

• Star: 2,980

• Version: 0.68.3

• License: MIT

설명: 부트스트랩 만큼이나 인기 있는 Semantic UI의 리액트 버전 입니다. Semantic UI에 jQuery 의존성을 제거하고 순수하게 리액트로만 개발 된 버전 입니다.

10. React-Foundation

• Star: 247

• Version: 0.7.0

• License: MIT

출저 : https://www.vobour.com/%EB%B2%A0%EC%8A%A4%ED%8A%B8-10-%EB%A6%AC%EC%95%A1%ED%8A%B8-ui-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-10-best-react-ui-lib

좋은 라이브러리들 모음인 것 같아서 공유를 해보았다.

https://jeong-pro.tistory.com/68

웹을 하면서 좋은 글을 찾아서 공유해본다.

Front-end Framework / Library

 최근 웹 애플리케이션 개발은 대부분 프론트엔드 프레임워크/라이브러리를 사용하여 만들어집니다. 그렇다면 왜 이런 프레임워크나 라이브러리를 사용할까요?

 물론 프레임워크나 라이브러리를 사용하지 않고 HTML, CSS와 단순한 javascript만을 이용하여 웹 페이지를 개발할 수 있습니다. 하지만 최근의 웹은 유저의 행동에 따른 다양한 데이터 및 UI 변화를 요구하고 있습니다. 이런 부분을 프레임워크나 라이브러리 없이 한다고 하면 상당히 관리적인 측면에서 어려움을 겪을 것입니다. 이러한 이유로 웹 애플리케이션 개발에서는 프론트엔드 프레임워크/라이브러리를 채택하고 있습니다.

 이 중에서 최근 핫한 3대장이 Angular, React, Vue 입니다. 개발에 필요한 스펙을 확인하고 서로의 장단점을 비교한 후 자신의 입맛에 맞는 프레임워크나 라이브러리를 선택해서 사용하면 됩니다.

React란?

 Facebook에서 개발한 컴포넌트(Components) 기반의 Javascript UI Library 입니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다. 하지만 React는 프론트엔드 라이브러리인 만큼 UI 이외의 라우트, 상태관리 같은 기능들이 내장되어 있지 않습니다. 이 부분은 React와 함께 Third-Party Library를 사용하면 됩니다. 현재 해외뿐만 아니라 국내의 다양한 기업들이 사용하고 있고 특히 스타트업에서 개발자를 뽑을 때 필요한 자격 요건에 넣는 회사들이 많습니다. 

Facebook은 왜 React를 만들었을까?

 기존에 다양한 프레임워크들이 존재했습니다. 이런 프레임워크들은 보통 MVC, MVVM, MVW 등의 디자인 패턴을 사용하여 만들어졌습니다. 여기서 공통적으로 사용되는 M(model)은 UI 로직과 서비스 로직의 양방향 바인딩을 통하여 서로의 모델의 값(데이터)를 동기화시킵니다. 둘 중하나의 데이터가 변경되면 다른 한쪽도 변경됩니다. 처음 화면을 하나 그린후 변경 사항이 있으면 변경된 부분만 바꿔줍니다. 하지만 이런 과정은 상당히 복잡한 작업이 될 수 있습니다. 특정 이벤트가 발생했을 때, 데이터에 변화가 생기고, 그 변화에 따라 특정 DOM을 선택적으로 가져와 뷰를 업데이트 해주어야합니다. 여기서 페이스북은 '특정 이벤트가 발생하면 뷰를 업데이트 시키지말고 해당 뷰를 날려버리고 새로 만들면 어떨까?' 라는 발상을 했습니다. 하지만 DOM 기반으로 작동하는 페이지에서 이벤트가 발생할 때마다 뷰를 새로 그리면 성능상 엄청난 문제가 발생할 수 있습니다. 이를 해결하기 위해 가상의 DOM(Virtual DOM)을 사용하기로 했습니다. 이를 통해 React는 단반향 데이터 바인딩을 할 수 있습니다.

Virtual DOM이란?

 Virtual DOM이란 말 그대로 가상의 DOM으로 이벤트로 인해 데이터가 변하면 실제 브라우저의 DOM에 새로운 것을 넣는 것이 아니라 javascript로 이루어진 Virtual DOM에 한 번 렌더링(rendering)하고, 기존의 DOM과 비교한 후 변화가 필요한 곳에만 업데이트를 해주는 것입니다. 이 Virtual DOM을 사용하여 DOM의 변화를 최소화시켜줍니다. 이것이 성능에서 매우 중요한 요소입니다. 현재 React외에도 여러 프론트엔드 프레임워크/라이브러리에서도 Virtual DOM을 사용하고 있습니다.

출처 : https://dev-kani.tistory.com/7

간단한 http 통신 코드입니다. 

이부분에서 require? cors? express? 너무 헷갈리시고 모르시는 분들을 위해 이 글을 써봤습니다.

var express = require('express')
const cors = require("cors");
const app = express();

var whiteList = [
    "http://localhost:3000"
]

app.use(cors(whiteList));

app.get('/', function(req, res) { 
    res.send('서버에서 값이 전달되었습니다.');
});

app.listen(5000, ()=> { 
    console.log(' 서버가 열렸습니다');
})

Express.js : 

Node.js에서는 MVC(Model-View-Controller) 패턴의 적용을 쉽게 해주는 여러 3rd-party 모듈들이 존재합니다. 그 중에 가장 인기있는 모듈이 바로 Express.js 입니다. 

웹 어플리케이션

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

API

자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성할 수 있습니다.

성능

Express는 기본적인 웹 애플리케이션 기능으로 구성된 얇은 계층을 제공하여, 여러분이 알고 있고 선호하는 Node.js 기능을 모호하게 만들지 않습니다.

Require() :

Node.js에서는 require 메서드를 통해 외부 모듈을 가져올 수 있습니다. Require 메서드는 node 가 local object에 추가한 메서드로서 다음과 같이 파라미터로 추가할 모듈의 파일 경로 값을 받습니다.

CORS :

CORS란 Cross Origin Resource Sharing의 약자로, 현재 도메인과 다른 도메인으로 리소스가 요청될 경우를 말한다. 예를 들어, 도메인 http://A.com 에서 읽어온 HTML페이지에서 다른 도메인 http://B.com/image.jpg를 요청하는 경우를 말한다. 이런 경우에 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 보안 상의 이유로, 브라우저는 CORS를 제한하고 있다.

하지만 SPA(Single Page Application)의 경우에는, RESTful API를 기반으로 비동기 네트워크 통신을 하기 때문에 API 서버와 웹 페이지 서버가 다를 수 있다. 이런 경우에 API 서버로 요청을 할 시에 CORS 제한이 걸리게 된다.