개요
react library에서 얼핏 들었었다. library중 기능구현을 손쉽게 만들수 있게 하는 라이브러리들이 있고, UI 공통 컴포넌트 라이브러리도 있다고 그중에서 최근에 가장 핫(?)한 shadcn/ui 라이브러리를 통해 로그인,회원가입을 어떻게 빠르고, 손쉽게 만들어가는지 알기 위해 shadcn/ui에서 공통컴포넌트로 사용되는 라이브러리들을 알고자 한다.
우선 공통컴포넌트 라이브러리 중
위 3가지를 알고 있다.
UI 공통 컴포넌트 library
위 3가지중 압도적으로 많이 사용되는 Material UI는 미리 제작된 UI 컴포넌트를 제공하여 빠르고 효율적이게 컴포넌트 구현이 가능하다.
그러나
MUI 단점
번거로운 설정 : 초기 설정이 복잡할수 있고, 초기 구성이 다른 라이브러리보다 시간이 더 걸릴 수 있다.
용량 : Material UI 라이브러리의 용량은 다른 컴포넌트 라이브러리보다 상대적으로 용량이 크기 때문에, 페이지 로딩 시간이 느려질 수 있다.
커스터마이징 : 물론 커스터마이징의 용이성은 있으나, 완전한 커스터마이징이 어려워, 고유한 디자인을 적용하려면 추가적인 작업이 있을 수 있다.
디자인 변경의 어려움 : MAterial Design의 디자인 철학에 따라 UI Component 요소들의 디자인 변경이 쉽지 않을 수 있다. 따라서 MAterial Design 스타일을 선호하지 않는다면 다른 프레임워크를 고려해야 할 수 도 있다.
그렇다면 radix-ui
headless UI 라이브러리라고 부르는 radix-ui 라이브러리는 원시적인 UI 컴포넌트를 제공해줘 커스터마이징이 용이하다.
더욱이 WAI-ARIA 의 디자인 패턴을 참고하여 컴포넌트를 구성했기 때문에 sementic 한 ui를 구성하는데 도움을 받을 수 있다.
그리고 경량화로 디자인 없는 ui 컴포넌트를 제공하기에 프로젝트에 부담을 주지 않는다.
headless UI란
디자인 없이 기능만 제공해주는 라이브러리이다. 디자인과 독립된 기능만을 제공해주기 때문에 커스텀하기 매우 편리하다.
물론 기본적인 CSS가 입혀지지 않아서 css를 입혀야한다는 단점?아닌 단점이 있지만
내가 MUI, radix-ui 둘 중 하나를 선택하라고 한다면 radix-ui를 선택하겠다.
- 난 css를 제로부터 하는것이 좋고, 마음이 편해진다. 모든것을 내가 control 할 수 있어서
- semantic한 ui를 사용한다면, 웹 접근성에 용이 하다.
- material ui 라이브러이와 같이 component ui 라이브러리와 달리 headless ui라이브러리가 경량화 되어있다.
radix-ui를 사용하는 것이 내가 선택하고 컨트롤 할수 있는 폭이 넓고, 경량화 되어있기에 괜찮지만, 그래도 뭔가.. 뭔가 좀 부족하다. 그래도 어느정도 css가 되어있는 멋진 ui library가 없을까? 한다면 바로 아래에 있다.
shadcn/ui
공식 문서 : https://ui.shadcn.com/
발췌/ Build your component library. Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
처음 shadcn/ui를 알게되고 공식홈페이지에 들어갔을 때 낯설었다. ui에 사용되는 컴포넌트를 라이브러리를 통해 쉽게 build up 할 수 있다는 것이 낯설었고, 단지 복사 붙여 넣는 것이라니...
intro
Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트
기본적인 headless ui 라이브러리인 radix-ui 컴포넌트에 tailwind css를 입힌 재사용 가능한 컴포넌트 모음이다.
여기서 제일 중요한 용량은 어떠한가??
shadcn-ui 라이브러리 package 용량은
131Kb로 매우 경량화 되어있다.
mui같은 경우 10.8mb 대비 매우 훌륭하다.
This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.
I mean you do not install it as a dependency. It is not available or distributed via npm. 발췌
종속성 설치가 필요없어서 매우 가벼운듯 하다.. (틀렸으면 댓글로 이유 설명좀해주쇼)
한번 사용해보자
실습 환경은 next.js page router를 사용하였습니다.
package manager는 pnpm을 사용했습니다.
pnpm create next-app shadcn-uinextjs 설치 후
pnpm dlx shadcn-ui@latest init설치하면 component.json에 대한 설정을 위한 터미널 창에 선택할 옵션들이 나온다.
component.json이란 공식문서에서 설명하고있다. component.json
그리고 이와 관련된 내용이 twitter에도 있는데
The components.json file is only needed if you need the CLI. 위 영문 내용과 관련된 공식홈페이지에도 적혀있다.
설치를 끝내고 나면 components폴더와 lib 폴더가 생성되고 util파일이 생긴다.
util파일에는 tailwind 스타일 커스텀을 도와주는 함수가 있다. ( util 함수는 다음편에 다루자)
이제 shadcn-ui 컴포넌트중 test용으로 card를 cli를 통해 불러오면
components 파일안에 자동으로 ui폴더가 생기고 안에 card 컴포넌트가 뿅하고 생긴다. 공식 사이트가서 카드 다운받자
pnpm dlx shadcn-ui@latest add card
신기했다 처음에는 ㅎㅎ
이렇게 card 컴포넌트가 생성 되고 이것을 원하는 곳에 적재적소에 활용하면 끄읕
마치면서
처음 ui 컴포넌트 라이브러리를 사용해보았는데 생소하지만, 처음이 shadcn ui 라이브러리여서 다행이라 생각한다. 단순히 복사해서 사용하고 css 커스텀도 가능하고 기능도 갖추고 있는 훌륭한 ui.... 넘나 멋진것
