shadcn/ui component library 공부 중

shadcn/ui component library

UI component library 로 기존에 사용해 본것 들 중에는 ant, mui 같은 것 인 줄만 알았는데 차이점이 조금 있다.
바로바로..

설치형이 아닌 component 자체를 내 코드에 복사 붙여넣기 되는 방식이기 때문에
커스텀하기 용이하고 무엇보다 가볍다. (전체 라이브러리를 설치하지 않아도 되니깐)

 

ANT, MUI가 좀 킹받는 이유 (단점)

지난 프로젝트에서 ant로 아바타 수정하기 만들다가 포기한게
props로 수정할 수 있도록 제공하는 색상이나 간단한것들 제외하면, 커스텀 너무 불가...

또 지난 프로젝트에서 MUI로 페이지네이션 구현했다가 걷어낸게
라이브러리가 묵직하게 기능이 많은데,
딱 페이지네이션만 사용하고 있어서 였다. (그때는 디자이너도 있었고 거의 필요가 없었다.)

 

공식 사이트의 설명 중.. (번역이.. 괜찮은가..)

- 하나의 컴포넌트 라이브러리가 아니라 copy & paste 재사용이 가능한 컴포넌트의 모음이다.

- 종속성으로 설치하지 않는다. (npm 패키지로 배포하지 않음)

- 스타일이 구현과 결합되지 않는다. 

- React 를 지원하는 모든 프레임워크를 이용할 수 있다.

 

https://ui.shadcn.com/

shadcn/ui

 

Radix UI library 

컴포넌트를 선택하고 API Reference를 누르면 Radix 페이지로 이동하는데 둘이 무슨 개념인지 모르겠다.

- 디자인이 깔끔하다 했더니, 디자인이 없는거?

- unstyled 컴포넌트로 스타일링 가이드에 따라 스타일 작성이 필요하다.

https://www.radix-ui.com/primitives/docs/guides/styling

 

=> (24/03/20) shadcn이 Radix UI와 tailwind를 기반으로 구성한 컴포넌트이다.
결론은 shadcn은 unstyled 컴포넌트인 radix를 데려다가 tailwind로 스타일링을 해놓은 놈이고,
복붙해서 우리 프로젝트에 컴포넌트로 넣어주니까 입맛에 맞게 꾸며서 써라 하는 것이다.

 

 

현재 login 기능을 구현하려고 하는데 구현에 필요한 것 

-  다크모드 지원 ( 시스템 모드는 무엇 )

https://ui.shadcn.com/docs/theming

- 리액트 훅폼과 zod (유효성검사library) 과 함께 쓰는 방법

https://ui.shadcn.com/docs/components/form

사용하면서 더 공부가 필요함!

----------

튜터님 설명 잠깐 듣구 이분 꺼 보니까 이해가 되었다.

shadcn/ui 를 이용한 공유 UI 컴포넌트 사용 경험