🌱 기초 프론트엔드
컴포넌트(Component)란?
쉽게 이해하기
레고 블록을 떠올려 보세요. 바퀴, 문, 창문 같은 부품들을 조립해서 자동차를 만들죠. 컴포넌트도 마찬가지예요. 버튼, 헤더, 카드 같은 UI 조각들을 만들어 두고, 필요할 때마다 꺼내서 조립하는 거예요.
핵심 정리
웹 페이지를 레고 블록처럼 조립할 수 있게 만든 재사용 가능한 UI 덩어리예요.
자세히 알아보기
컴포넌트는 웹 페이지를 구성하는 독립적이고 재사용 가능한 UI 조각입니다. 예를 들어 인스타그램 피드를 생각해 보세요. 각 게시물 카드가 똑같이 생겼죠? 이미지, 좋아요 버튼, 댓글 입력창... 이걸 매번 코드로 다시 작성하는 게 아니라, '게시물 카드' 컴포넌트를 한 번 만들어 두고 데이터만 바꿔가며 반복해서 사용하는 겁니다.
컴포넌트의 가장 큰 장점은 재사용성과 유지보수성입니다. 만약 버튼 디자인을 바꾸고 싶다면, 버튼 컴포넌트 하나만 수정하면 그 버튼을 쓰는 모든 페이지가 자동으로 업데이트됩니다. 매번 찾아다니며 고칠 필요가 없어요.
실무에서는 React, Vue, Svelte 같은 프레임워크로 컴포넌트를 만듭니다. 예를 들어 'Button.jsx'라는 파일에 버튼 디자인과 동작을 정의해 두고, 필요한 곳에서 <Button>이라고 써서 불러오는 식이죠. 마치 함수를 만들어서 여러 번 호출하는 것과 비슷해요.
컴포넌트는 계층 구조로 조립할 수 있습니다. 작은 컴포넌트들(버튼, 입력창)을 모아서 더 큰 컴포넌트(로그인 폼)를 만들고, 그걸 또 모아서 페이지를 완성하는 거예요. 이렇게 쪼개서 만들면 협업할 때도 편리합니다. 각자 맡은 컴포넌트만 작업하면 되니까요.