프론트엔드 발전을 따라잡기 (1)

• shadcn/ui, Radix, React Area, ... 등등 예전에는 bootstrap 하나로 다 해결되었던 것 같은 디자인 시스템 어쩌구가 뭔가 많이 생겼다.
• 이번에 React로 프론트엔드 구현하는 김에 한번 정리해봤다.

왜 생겼는가?

1. 부트스트랩 (2011)은 CSS 프레임워크. 디자인을 조금만 벗어나려고 해도 스타일을 덮어써야 함.
   • 컴포넌트에 클래스만 붙이면 스타일과 동작이 한번에 딸려 옴
2. Tailwind (2019)는 부트스트랩처럼 미리 만들어진 컴포넌트 클래스 대신, 유틸리티 클래스를 조합하는 방식을 대중화시킴.
3. Radix, Headless UI 등 라이브러리는 스타일과 로직을 분리해서 해결. React 생태계가 성숙하며 동작 로직과 스타일을 분리하게 됨
4. 각 라이브러리 사이에서도 장단점이 있음

구조

• Headless primitive: 동작 및 접근성 로직만 담당
  • Radix UI
  • Base UI
  • React Aria
• 스타일 입히는 레이어
  • Radix Themes (Radix 공식)
  • shadcn/ui (Radix, Base UI, React Aria 모두 사용 가능)

shadcn/ui 특징

• 전통적인 npm 패키지는 npm install을 통해 설치하면 그 라이브러리 내부의 내용을 바꾸기는 어려웠음.

npm install @mul/material

• 프로젝트에 의존성이 생기고,

import { Button } from '@mul/material'

• Button 내부를 수정하기 어려웠음.

• 하지만 shadcn/ui는 npx를 통해 실행하면 라이브러리를 설치하는 것이 아닌 cli 가 button.tsx같은 소스 코드 파일을 가져와서 프로젝트에 직접 복사하여 저장.
  • 프로젝트에 의존성 남지 않음.
  • 내가 만든 코드처럼 취급되기 때문에, 원한다면 수정도 가능.