UI 컴포넌트 라이브러리로 생산성 높이기

안녕하세요, 소플입니다.
프론트엔드 개발을 하다보면 꽤 많은 경우에 UI 컴포넌트 라이브러리를 사용하게 됩니다.
UI 컴포넌트 라이브러리는 곧바로 사용할 수 있는 형태의 UI 컴포넌트들을 모아놓은 것이라고 할 수 있습니다. 그리고 여기서 UI 컴포넌트는 사용자 인터페이스(User Interface)의 다양한 부분을 구성하고 표현하는 데 사용되는 독립적인 요소를 말합니다. 웹사이트에서 우리가 쉽게 접할 수 있는 UI 컴포넌트의 예로는 버튼, 입력 필드, 체크 박스 등이 있습니다.

특별히 리액트의 경우에는 컴포넌트 기반의 구조를 갖고 있기 때문에, 이러한 UI 컴포넌트들을 잘 조합해서 개발하는 것이 중요합니다. 재사용성이 높게 잘 만들어진 UI 컴포넌트는 반복적으로 재사용 가능하기 때문에 개발 속도를 높여주고 유지보수에 드는 시간을 줄여주기 때문이죠.

NOTE. 개념 정리
UI 컴포넌트 라이브러리
곧바로 사용할 수 있는 형태의 UI 컴포넌트들을 모아놓은 것
UI 컴포넌트
사용자 인터페이스(User Interface)의 다양한 부분을 구성하고 표현하는 데 사용되는 독립적인 요소

그럼 리액트 생태계의 대표적인 UI 컴포넌트 라이브러리들을 하나씩 살펴볼까요?

Material UI

먼저 가장 대표적이고 많이 사용하는 UI 라이브러리로 Material UI가 있습니다.
흔히 줄여서 MUI라고 부르는데 Material UI는 구글에서 개발한 Material Design System에 맞춰서 개발된 리액트용 UI 컴포넌트 모음이라고 보면 됩니다.

🔗 Material UI

아래는 Material UI의 Button 컴포넌트를 사용한 예시 코드입니다.
패키지를 설치하고 이렇게 내가 원하는 종류의 컴포넌트를 import해서 사용하기만 하면 됩니다.

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function BasicButtons() {
    return (
        <Stack spacing={2} direction="row">
            <Button variant="text">Text</Button>
            <Button variant="contained">Contained</Button>
            <Button variant="outlined">Outlined</Button>
        </Stack>
    );
}

이 Material UI는 리액트용 UI 라이브러리를 언급할 때 항상 빠지지않고 등장하는 라이브러리이며, 다양한 컴포넌트와 사용하기 편리한 방식 등으로 오랜기간 압도적인 인기를 유지하고 있습니다.

Ant Design

다음으로 대표적인 UI 라이브러리인 Ant Design이 있습니다.
보통 줄여서 antd라고 부르는데, Material UI와 함께 가장 많이 사용되는 UI 라이브러리 중 하나입니다.

🔗 Ant Design

아래는 Ant Design의 Button 컴포넌트를 사용한 예시 코드입니다.
앞에서 살펴본 Material UI와 사용하는 방식이 비슷하죠?
UI 컴포넌트 라이브러리들은 각 컴포넌트의 속성이나 스타일을 입히는 방식만 다를 뿐, 기본적으로 사용하는 방식은 거의 유사하다고 보면 됩니다.

import React from 'react';
import { Button, Space } from 'antd';

const App: React.FC = () => (
    <Space wrap>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
    </Space>
);

export default App;

Ant Design 역시 굉장히 다양한 컴포넌트들을 제공하고, 특별히 다른 Ant시리즈 패키지들과 함께 자신들만의 생태계를 구축하고 있다는 특징이 있습니다.

Chakra UI

그리고 최근들어 떠오르고 있는 UI 라이브러리인 Chakra UI가 있습니다.
Material UI가 조금 무겁다는 단점이 있기 때문에, 조금 더 가볍고 심플하게 사용하고 싶을 때 많이 사용하는 라이브러리입니다.

🔗 Chakra UI

아래는 Chakra UI의 Button 컴포넌트를 사용한 예시 코드입니다.
이 코드에서 볼 수 있듯이 Chakra UI는 각 컴포넌트의 props를 통해 쉽게 스타일을 입힐 수 있다는 장점이 있습니다.

<Stack spacing={4} direction='row' align='center'>
    <Button colorScheme='teal' size='xs'>
        Button
    </Button>
    <Button colorScheme='teal' size='sm'>
        Button
    </Button>
    <Button colorScheme='teal' size='md'>
        Button
    </Button>
    <Button colorScheme='teal' size='lg'>
        Button
    </Button>
</Stack>

Chakra UI는 다른 UI 라이브러리들에 비해서 늦게 출시되었지만, 빠르게 치고 올라오고 있는 UI 라이브러리계의 떠오르는 샛별이라고 할 수 있습니다.

React Bootstrap

마지막으로 소개할 UI 라이브러리는 React Bootstrap입니다.
Bootstrap은 원래 트위터에서 만든 UI 라이브러리입니다.
jQuery시절에 굉장히 많이 사용되었던 라이브러리인데, 그걸 리액트용으로 만든 것이 바로 React Bootstrap입니다.

🔗 React Bootstrap

아래는 React Bootstrap의 Button 컴포넌트를 사용한 예시 코드입니다.

import Button from 'react-bootstrap/Button';

function ButtonExample() {
    return (
        <div>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="success">Success</Button>
            <Button variant="warning">Warning</Button>
            <Button variant="danger">Danger</Button>
            <Button variant="info">Info</Button>
            <Button variant="light">Light</Button>
            <Button variant="dark">Dark</Button>
            <Button variant="link">Link</Button>
        </div>
    );
}

export default ButtonExample;

React Bootstrap은 기존 Bootstrap과 거의 동일한 형태의 컴포넌트들을 제공하기 때문에, 기존에 Bootstrap을 사용하던 개발자들이 많이 사용하고 있습니다.

UI 컴포넌트 라이브러리 트렌드

그럼 지금까지 살펴본 UI 컴포넌트 라이브러리들의 트렌드를 한 번 살펴볼까요?
아래 그림은 앞에서 소개한 UI 라이브러리들의 npm trend를 나타낸 것입니다.

🔗 UI 컴포넌트 라이브러리 npm trend

NOTE. npm trend란?
일정 기간 동안 npm에서 해당 패키지를 다운로드 받은 횟수를 통계 낸 것.
npm trend를 보면 어떤 라이브러리가 얼마나 많이 사용되는지 알 수 있음.

이 트렌드를 보면 어떤 UI 라이브러리를 많이 사용하는지 파악할 수 있습니다.
UI 라이브러리들 중에서는 Material UI가 2019년 이후로는 가장 높은 순위를 지켜왔는데, 여기 나타난 Material UI의 패키지가 2021년 하반기에 나온 새로운 버전의 패키지명(@mui)이기 때문에 순위에서 잠깐 밀린 것처럼 보이긴 합니다.
어찌됐든 지금 시점에는 Material UI가 1위 자리를 다시 지키고 있으며, 다음으로 React Bootstrap이 2위, Ant Design이 3위를 차지하고 있습니다.
그리고 마지막으로 가파르게 성장하고 있는 Chakra UI가 4위를 차지하고 있습니다.

이 트렌드를 통해서 개발자들이 어떤 UI 라이브러리를 많이 사용하는지 파악할 수 있으며, 나는 어떤 UI 라이브러리를 사용하는게 좋을지 결정하는데 참고할 수 있습니다.

UI 컴포넌트 라이브러리 적용하기

그렇다면 이제 내가 만드는 리액트 애플리케이션에 UI 컴포넌트 라이브러리를 적용해서 생산성을 올려봐야겠죠?
다음과 같은 과정을 통해 UI 라이브러리를 적용해보면 좋습니다.

1. 애플리케이션에 필요한 컴포넌트 파악하기

먼저 내가 만들려고 하는 애플리케이션에서 필요한 컴포넌트들을 파악해야 합니다.
한 UI 라이브러리에는 있는 컴포넌트가 다른 UI 라이브러리에는 없을 수 있기 때문이죠.
그래서 UI 라이브러리를 선택하기 전에, 먼저 애플리케이션 기획 또는 화면 디자인을 통해 필요한 컴포넌트를 파악하는 것입니다.

2. UI 컴포넌트 라이브러리 선택하기

필요한 컴포넌트를 파악했다면, 다음으로는 실제로 사용할 UI 컴포넌트 라이브러리를 선택하면 됩니다.
여기서는 최대한 내가 필요로 하는 컴포넌트들을 모두 지원하는 UI 라이브러리를 선택하는 것이 좋습니다.

3. 패키지 설치 후 적용하기

사용할 UI 라이브러리를 선택했다면 이제 각 UI 라이브러리의 웹사이트를 참고해서 패키지를 설치합니다.
그리고 이후에는 컴포넌트들을 import해서 실제 화면들을 구현하면 됩니다.

4. 원하는 테마로 커스터 마이징(Customizing) 하기

UI 라이브러리는 자체적인 규칙에 의해 이미 디자인이 입혀져 있기 때문에, 내가 구현하기 원하는 디자인과는 사뭇 느낌이 다른 경우가 많습니다.
그런 경우에는 각 UI 라이브러리의 테마를 커스터 마이징 해서 사용하면 됩니다.
일반적으로 내부적인 용도로만 사용하는 관리자 페이지 같은 내부 툴의 경우에는 디자인에 별로 신경쓸 필요가 없지만, 외부 사용자에게 배포될 애플리케이션이라면 디자인을 잘 맞추는 것이 중요합니다.

지금까지 다양한 UI 컴포넌트 라이브러리와 트렌드, 그리고 UI 라이브러리를 적용하는 과정에 대해 알아보았습니다.
저는 다음에 또 유익한 글로 찾아뵙겠습니다!
지금까지 소플이었습니다. 감사합니다😀