용어 사전 coding 용어 페이지

컴포넌트

상태와 마크업, 동작을 묶어 재사용하는 화면 단위

component #javascript#svelte#frontend

English version

다른 이름

component

관련 개념

상태 관리 접근성

핵심 아이디어

컴포넌트는 화면을 역할별로 나눈 재사용 가능한 조각입니다. 카드, 모달, 입력 폼, 목록처럼 반복되는 UI를 독립적인 단위로 분리하면 수정 범위가 명확해지고 협업도 쉬워집니다.

이 블로그에서의 역할

Mathbong에서는 순수 JavaScript의 컴포넌트 패턴부터 Svelte의 .svelte 파일 구조까지, 서로 다른 도구를 하나의 개념으로 연결합니다. 핵심은 "상태, 마크업, 이벤트를 한 책임 단위로 묶는다"는 점입니다.

이 개념을 다루는 글

[Svelte 시리즈 20편] 캡스톤: 상태·라우팅·접근성을 묶는 미니 앱 1~19편에서 다룬 개념을 Task Orbit 앱 하나로 통합해 반복 가능한 설계-검증-배포 흐름을 완성합니다.[Svelte 시리즈 16편] 컴포넌트 테스트 전략 Svelte Testing Library와 Vitest를 사용해 컴포넌트를 단위·통합 수준에서 검증하는 방법을 정리합니다.[Svelte 시리즈 8편] 레이아웃과 슬롯으로 화면을 짜맞추자 Svelte의 레이아웃 파일, 슬롯, 네임드 슬롯을 이용해 복잡한 화면을 단계적으로 조립하는 방법을 정리합니다.