Component
컴포넌트
버튼·카드·메뉴처럼 반복해서 쓰이는 화면 조각을 한 번 만들어 두고 여러 곳에서 가져다 쓰는 단위로, 2013년 미국 Meta(전 Facebook)가 React를 발표하며 현대 웹·앱 개발의 표준이 된 개념입니다.
쉽게 말하면?
예전에는 같은 모양의 버튼을 화면마다 따로 그렸어요. 컴포넌트는 '버튼 한 번만 잘 만들어 두고 어디서든 가져다 쓰자'는 발상입니다. 한국의 토스·당근·네이버는 1,000개 이상의 컴포넌트로 화면을 조립하고, 미국 Apple·Google도 같은 방식을 씁니다. AI 시대에는 v0·Cursor 같은 도구가 컴포넌트 코드를 자동 생성해, 비전공자도 디자인 시스템 부품으로 화면을 만들 수 있습니다.
한 줄로 비유하면?
컴포넌트는 레고 블록입니다. 정해진 부품을 가져다 조립만 하면 무엇이든 만들 수 있습니다.
어디에 쓰이나?
토스 TDS 컴포넌트
토스는 1,200개 이상 컴포넌트를 Figma·React 양쪽으로 관리.
결과: 디자이너·개발자가 회의 없이 동일 부품 사용.
shadcn/ui · 오픈소스 컴포넌트
미국 1인 개발자 Shadcn이 만든 오픈소스 컴포넌트 모음.
결과: 1인 스타트업도 검증된 컴포넌트를 무료로 활용.
주의할 점은?
컴포넌트가 AI 시대에 더 중요해진 이유는 세 가지입니다.
첫째, AI 코드 생성의 단위입니다. v0·Cursor가 '카드 컴포넌트 만들어 줘' 같은 요청을 받으면 디자인 시스템 패턴을 따라 일관된 결과를 만듭니다.
둘째, 디자인 시스템의 구성 요소입니다. 컴포넌트 100개로 화면 1만 개를 만들 수 있어, 큰 회사일수록 컴포넌트 운영이 곧 디자인 운영이 됩니다.
셋째, 한국 IT 채용 표준입니다. '컴포넌트 기반 사고'가 한국 프론트엔드 채용에서 가장 자주 묻는 개념 중 하나입니다.
어떻게 발전해 왔나?
관련 태그
참고 자료
- React 공식 사이트 — 공식 대표 페이지 · Meta · 2026 접속 — https://react.dev/
- shadcn/ui — 오픈소스 컴포넌트 표준 · shadcn · 2025 — https://ui.shadcn.com/
- 토스 디자인 — 한국 컴포넌트 사례 · 토스 · 2024 — https://design.toss.im/
- Atomic Design — 컴포넌트 분류 표준 · Brad Frost · 2016 — https://atomicdesign.bradfrost.com/
- Material Design — Google 컴포넌트 사례 · Google · 2025 — https://m3.material.io/
대표 출처
React 공식 문서 (Meta)이 페이지에 대한 의견을 남겨주세요
여러분의 의견은 다음 갱신에 반영됩니다.