Component

📎 React 공식 문서 - Component

컴포넌트 분리 기준

• 재사용성 (Reusability)
  여러 곳에서 반복적으로 사용되는 UI 요소는 컴포넌트로 분리하여 재사용성을 높인다.

• 가독성 (Readability)
  큰 컴포넌트를 작고 독립적인 단위로 나눠 코드의 구조를 더 명확하고 이해하기 쉽게 만든다.

• 단일 책임 원칙 (SRP: Single Responsibility Principle)
  하나의 컴포넌트는 하나의 역할만 담당해야 하며, 이를 통해 유지보수성과 테스트 용이성을 향상시킨다.

추가적으로 고려할 수 있는 기준,

• 관심사의 분리 (Separation of Concerns)
  데이터 처리, 스타일링, 뷰 로직이 한 컴퍼넌트에 섞이지 않도록 나눈다.

• 파일 크기와 깊이 제한
  하나의 파일이 너무 길거나 중첩 구조가 깊어질 경우, 컴포넌트 분리 시점을 고려한다.

• 의도 기반 분리
  화면상의 위치보다는, “무엇을 하는가”를 기준으로 컴포넌트를 나누는 것이 바람직하다.

컴포넌트 생성 방법

💡 React 공식 가이드

📎 React docs
We recommend defining components as functions instead of classes.

리액트 컴포넌트 만드는 방법은 함수형 컴포넌트와 클래스형 컴포넌트 크게 두 가지가 있다.
공식 문서에서는 함수형 컴포넌트와 Hook을 사용하는 방식을 권장한다.

함수형 컴포넌트를 권장하는 이유는 코드를 작성하기 쉽고, 성능면에서 유리하기 때문이다.

함수형 컴포넌트를 권장하는 이유

• 작성이 간단하고, 코드가 직관적이다.
• React Hook을 활용하여 상태 관리와 생명주기 처리가 쉬워진다.
• 최적화와 성능 면에서 유리하다.