[React] antd 컴포넌트 사용 코드 VS Tailwind CSS + HTML 태그 코드 비교

1. 첫 번째 코드 (antd 컴포넌트 사용)

<Input
  value={memoEditing[row.id] ?? value ?? ""}
  onChange={(e) => onChangeMemo(row.id, e.target.value)}
  placeholder="메모를 입력하세요"
  style={{ width: 200 }}
/>
<Button
  type="primary"
  style={{ backgroundColor: "#52c41a", borderColor: "#52c41a" }}
  onClick={() => onSaveMemo(row.id)}
>
  저장
</Button>

• Ant Design (antd) 라이브러리에서 제공하는 Input, Button 컴포넌트를 그대로 사용.

• style={{ ... }} 로 인라인 스타일을 직접 지정.

• 장점

  • 빠르게 사용 가능
  • antd에서 제공하는 기본 디자인과 기능(hover, disabled 등)이 자동 적용.

• 단점

  • 커스터마이징이 Tailwind 대비 제약이 있음.
  • 디자인이 전반적으로 antd 스타일에 묶임.

2. 두 번째 코드 (Tailwind CSS + HTML 태그)

<Input
  style={{ width: 200 }}
  value={editMemo[row.id] ?? value ?? ''}
  onChange={(e) => onChangeMemo(row.id, e.target.value)}
  placeholder="메모를 입력하세요."
/>
<button
  className="bg-red-500 border-0 hover:bg-red-600  
  focus:outline-none focus:ring-2 focus:ring-red-300
  transition-colors duration-200 text-white px-10 py-4 rounded-md"
  onClick={() => onSaveMemo(row.id)}
>
  저장
</button>

• 버튼은 그냥 HTML < button > 태그 사용 → 스타일을 Tailwind CSS 유틸리티 클래스로 적용.

• bg-red-500, hover:bg-red-600, rounded-md 등은 Tailwind에서 제공하는 클래스.

• 장점

  • 디자인을 완전히 통제 가능.
  • 빠른 prototyping, 일관된 디자인 시스템 구축 가능.

• 단점

  • 클래스명이 길어질 수 있음.
  • antd처럼 기본 기능(로딩, 아이콘 내장 등)은 직접 구현해야 함.

3. 두 코드 차이 요약

구분	Ant Design (antd)	Tailwind CSS
스타일 방식	라이브러리 기본 스타일 + style={{}}	유틸리티 클래스 (className)
커스터마이징	제한적 (CSS override 필요할 때 많음)	자유롭고 세밀하게 가능
컴포넌트 제공	버튼, 입력창, 모달, 테이블 등 UI 풀셋 제공	UI는 직접 조합해야 함
러닝커브	문서 보고 바로 사용 가능	CSS 개념 필요, 클래스 익숙해져야 함
디자인 일관성	antd 테마 기반으로 통일	팀에서 디자인 규칙을 직접 관리해야 함

• 빠른 개발 / 기본 UI 필요 → antd 같은 UI 라이브러리 사용

• 브랜딩 / 커스텀 디자인 중요 → Tailwind로 직접 스타일링