쉬운 설명
UI 코드를 처음 보면 한 페이지에 모든 게 다 들어 있는 것처럼 보이지만, 실제로는 작은 부품들의 조립체입니다. 버튼 하나가 컴포넌트이고, 검색창·댓글 카드·메뉴 바도 각각 컴포넌트입니다. 페이지는 이 부품들을 조합해서 만듭니다.
컴포넌트로 쪼개는 이유는 두 가지입니다. 첫째, 같은 모양을 여러 군데서 일관되게 쓰기 위해서. 둘째, 한 군데 고치면 모든 곳에 자동으로 반영되도록 하기 위해서. 디자인 팀이 버튼의 둥근 정도를 바꿨을 때, 사이트 전체의 버튼이 한꺼번에 바뀌는 마법은 컴포넌트 덕분에 가능합니다.
컴포넌트는 보통 세 가지 단위로 자랍니다. ① 원소(원자적 부품: 버튼·아이콘), ② 분자(여러 원자를 묶은 부품: 검색 폼은 입력칸 + 버튼), ③ 페이지 섹션(여러 분자를 묶은 영역: 헤더·푸터). 이 사고방식을 정형화한 것이 '아토믹 디자인'이고, 디자인 시스템의 기본 어휘가 됩니다.
동작 방식은 두 가지 입력으로 단순화됩니다. ① props(부모가 넘기는 설정값 — 버튼이라면 '색·크기·라벨'), ② state(컴포넌트 자체의 상태 — '눌렸나·로딩 중인가'). props가 바뀌거나 state가 바뀌면 컴포넌트가 자기 화면을 다시 그립니다. React·Vue·Svelte 같은 프레임워크가 이 사고를 코드로 표준화했습니다.
좋은 컴포넌트를 만드는 일은 의외로 어렵습니다. 너무 일반적이면 어떤 상황에도 맞춰야 해서 옵션이 폭발하고, 너무 구체적이면 비슷한 컴포넌트가 여러 개로 늘어납니다. 보통 '같은 컴포넌트가 세 번 이상 비슷하게 쓰일 때' 추출하기 시작하는 것이 권장됩니다. 그리고 디자인 토큰을 함께 묶어 두면, 색·간격·글꼴 변경이 컴포넌트를 거쳐 전 화면에 자연스럽게 반영됩니다.
비유로 보면
컴포넌트는 레고 블록과 비슷합니다. 한 종류의 블록을 잘 만들어 두면, 그것을 모아 자동차도 만들고 집도 만들고 우주선도 만듭니다. 블록의 모양이 통일돼 있어야 끼우기 쉽고, 한 블록의 색을 바꾸면 그 블록을 쓴 모든 모형이 함께 바뀝니다.
어디에서 만나나
React·Vue·Svelte 같은 프런트엔드 프레임워크의 기본 단위, 모바일 앱의 SwiftUI·Jetpack Compose 위젯, 디자인 도구 Figma의 컴포넌트·variants 기능. 회사가 화면 수가 늘기 시작하면 자체 컴포넌트 라이브러리(디자인 시스템)를 운영하는 것이 표준이 됐습니다.
작은 예시
쇼핑몰의 '상품 카드'를 떠올려 보세요. 이미지·상품명·가격·'장바구니' 버튼이 한 묶음입니다. 이 카드 한 종류를 컴포넌트로 만들어 두면, 메인 화면·검색 결과·추천 영역에 똑같이 깔끔하게 나타나고, 가격 표시 형식을 바꾸고 싶으면 컴포넌트 한 곳만 고치면 모든 화면에 반영됩니다.
자주 하는 오해
한 줄 정리
컴포넌트의 진짜 가치는 '재사용'보다 '일관성과 변경의 한 곳'입니다. 한 번 잘 추출한 컴포넌트는 그 후의 모든 변경을 단순하게 만들어 줍니다.