IT/React

React - UI 라이브러리

루벤초이 2021. 3. 15. 11:10

웹 프로그래밍의 큰 장점 중의 하나는 UI 디자인이 분리되어 전문 디자이너와 독립적으로 개발할 수 있다는 사실입니다.

즉 일반적인 웹 프로그래밍은 3가지 섹션(HTML, CSS & Javascript)으로 나뉘는데, 

HTML은 컨텐츠, CSS는 디자인, Javascript는 상태 변화를 담당한다고 보시면 됩니다.

  Sample Code

 

CSS

이때 CSS는 보통 .css 파일로 HTML 헤더에서 링크되곤 하는데요, 아주 유명한 Bootstrap의 경우, 아래와 같이 HTML 파일의 <head> 태그 안에서 <link> 태그로 불러집니다. 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>루벤초이의 블로그</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

자세히 보시면 <link> 태그에서 href 속성에 외부 URL 값이 있는데요, 이렇게 외부로부터 링크(브라우저로 다운로드)하는 것을 CDN(Content Delivery Network)이라고 부릅니다. 웹 라이브러리 사이트에서 cdn 링크를 제공한다는 의미는 위와 같이 link 태그로 가져와서 사용할 수 있다는 의미입니다.

 

Bootstrap 같은 널리 알려진 UI를 사용하는 목적은 당연히 전문적이고 트렌디한 UI 컨텐츠를 공짜로 갖다 쓰려는 이유겠지만,최근에는 웹앱의 필수 기능이 된 반응형 웹 때문이기도 합니다. 반응형 웹(Responsive Web)이란, 동일한 웹사이트에서 접속하는 디바이스의 display 크기나 종류 등에 따라 다르게 반응하는 웹인데요, 이 복잡한 기능을 CSS 라이브러리에서 대신 해주는 것입니다.

 

CSS & React

그렇다면 React에서는 외부 CSS를 어떻게 갖다 쓸까요?

물론 create-react-app에서 최초 생성된 public/index.html 내에서 CDN 링크를 넣어 불러올 수도 있지만, 보통은 그렇게 하지 않고 npm(node package manager)에 등록된 라이브러리를 갖다 씁니다.

 

그렇다면 React에서도 Bootstrap 같은 CSS 라이브러리가 있을까요?

네, 구글링으로 'best react ui'를 검색해보면, 지금 유행하는 라이브러리들을 볼 수 있습니다. 아래는 방금 검색해 본 사이트인데요, 수 년째 랭킹에서 빠지지 않는 React bootstrap, Reactstrap, Ant design, Material UI 등이 눈에 띄네요.

 

20+ Best React UI Component Libraries / Frameworks for 2021

A collection of popular React UI component libraries / frameworks that help you build an awesome interface for any web project or app.

www.codeinwp.com

각각의 라이브러리 사이트를 들어가보면 소개 문서와 설치 방법 등이 나와있는데요, 설치 방법은 보통 npm install OOO 외에 추가적인 액션을 취해야하는 것도 있으니 주의 깊게 읽어봐야 합니다.

 

오늘은 제가 자주 사용하는 Reactstrap과 Antd만 간단히 살펴보겠습니다. 

 

Reactstrap

 

 

reactstrap - React Bootstrap 4 components

Installation NPM Install reactstrap and peer dependencies via NPM npm install --save reactstrap react react-dom Import the components you need Danger! import React from 'react'; import { Button } from 'reactstrap'; export default (props) => { return ( Dang

reactstrap.github.io

Reactstrap은 앞에서도 언급한 그 유명한 Bootstrap을 react로 가져온 컴포넌트입니다. 같은 목적으로 만들어진 React bootstrap도 있는데, 둘 다 bootstrap 기반이니 보여지는 결과는 비슷하겠지만, 코드 문법은 다릅니다.

 

사이트에서 설치 방법에 대해 친절하게 소개하고 있긴 하지만, 설명이 길다 보니 조금 헷갈릴 수 있습니다. 요약하자면, 아래와 같이 두 번의 액션을 수행하시면 됩니다.

  • npm install --save  reactstrap bootstrap   (※reactstrap과 별도로 bootstrap을 설치해야합니다.)
  • src/index.js 에 반드시 다음 코드 추가  (※처음에 이 부분을 많이들 깜빡합니다.)
  •  
import 'bootstrap/dist/css/bootstrap.min.css';

 

코딩할 때는 사이트의 컴포넌트 소개 페이지에서 원하는 컴포넌트 항목을 찾아 예제를 참조하면서 코딩하는 것이 좋습니다. 예를 들어 Button은 다음과 같이 추가합니다. 간단하죠?

Reactstrap 컴포넌트 소개 페이지

 

import React from 'react';
import { Button } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <Button color="primary">primary</Button>{' '}
      <Button color="secondary">secondary</Button>{' '}
      <Button color="success">success</Button>{' '}
      <Button color="info">info</Button>{' '}
      <Button color="warning">warning</Button>{' '}
      <Button color="danger">danger</Button>{' '}
      <Button color="link">link</Button>
    </div>
  );
}

export default Example;

 

Ant Design

 

Ant Design - The world's second most popular React UI framework

 

ant.design

깔끔한 디자인이 디자인이 인상적인 라이브러리입니다. 특히 저는 Steps 나 Progress, Spin, Collapse 등을 좋아하는데, 아래 일부 컴포넌트만 봐도 알겠지만 굉장히 깔끔하고 아기자기합니다. 물론 UI는 취향이니까, 호불호가 있을 수 있겠죠.

Ant Design 컴포넌트 소개 페이지

설치도 간단해서 npm install antd 하면 끝납니다.

 

여기서 잠깐!

  • React를 처음 배우는 단계이거나 기존에 웹 프로그래밍을 해 본적 없다면, Ant Design보다는 Reactstrap를 먼저 해보시기 바랍니다. Bootstrap이 워낙 유명하니까, Bootstrap을 베이스로 한 라이브러리를 해보는 것이 좋지 않을까 싶네요. Reactstrap 좀 써 보다가 질릴만 하면 슬슬 다른 UI 라이브러리들을 비교해 보면서 자신의 성향에 맞는 것을 찾는 것이 좋을 것 같습니다.

 

728x90
반응형