리액트에서 컴포넌트란?

ui를 구성하는 독립적이고 재사용 가능한 코드 조각, 특정 기능이나 UI 요소를 캡슐화함
주로 단일 책임 원칙을 따름

클래스형과 함수형으로 나뉘는데, 최근 hooks도입으로 함수형 컴포넌트가 주로 사용됨
더 간결하고 이해하기 쉬운 코드를 작성할 수 있게 해줌

컴포넌트의 주요 장점은 재사용성과 유지보수성
ex - 버튼 컴포넌트를 만들면 여러 페이지에서 다양한 스타일과 기능으로 재사용 가능
또한 컴포넌트는 props를 통해 부모로부터 데이터를 전달받을 수 있어, 동적인 ui 손쉽게 구현 가능

컴포넌트 설계 시

1. 하나의 컴포넌트가 너무 많은 책임 갖지 않게 하기
   역할이 명확하도록 설계해야함
   ex - 비즈니스 로직과 ui 로직 분리

2. 재사용성 고려
   특정 컴포넌트가 여러 상황에 재사용될 가능성이 높으면 유연하게 설계해야 추후 재사용성이 용이
   props를 통해 필요한 데이터와 동작 주입받아 다양한 상황에서 쉽게 재사용될 수 있도록 하는 게 좋음

3. 성능 최적화
   불필요한 리렌더링 방지 위해 메모이제이션 적절히 활용, 컴포넌트 크기 적절히 유지

즉
각각의 상황에 맞는 컴포넌트를 만들면 됨
당장 상황에 부합하는 최적의 컴포넌트를 만들 것!