[React] 컴포넌트를 분리하는 기준과 방법

리액트 컴포넌트를 분리하는 기준

1. 재사용성 (Reusability)
   • 다른 부분에서도 사용될 수 있는지 여부
   • 재사용 가능한 컴포넌트 → 효율성 증가
   • 코드 중복 감소
   • ex. 버튼, 입력필드, 툴팁
2. 단일 책임 원칙 (Single Responsibility Principle, SRP)
   • 각 컴포넌트는 하나의 기능만 수행
   • 컴포넌트 이해하기 쉬워짐
   • 유지보수 간단
   • ex. 로그인 폼 컴포넌트는 사용자 인증에 대한 책임만! → 다른 기능들은 분리된 컴포넌트에서 처리
     
3. 가독성 (Readability)
   • 너무 많은 JSX, 로직 포함 → 더 작은 단위로 분리
   • ex. 복잡한 조건부 렌더링이 필요한 컴포넌트 : 여러 하위 컴포넌트로 분리
4. 상태와 라이프사이클 (State and Lifecycle)
   • 컴포넌트의 성능과 동작에 미치는 영향을 고려하여 분리
   • ex. 데이터 패칭과 관련된 로직을 포함한 컴포넌트와 UI 렌더링만 담당하는 컴포넌트를 분리
5. UI 요소 (UI Elements)
   • 서로 다른 시각적 요소는 컴포넌트로 분리
   • 디자인 변경, 유지보수 시 유연성 제공
   • ex. 사이드바, 헤더, 푸터 등은 각각 독립적인 UI 컴포넌트로 관리

컴포넌트 분리의 중요성

1. 유지보수성 (Maintainability)
   • 문제 진단, 수정 용이
   • 컴포넌트의 기능과 역할 분명
2. 확장성 (Scalability)
   • 적절히 분리된 컴포넌트 → 다른 부분에 영향 X
   • 독립적 발전 가능
   • 전체 시스템의 유연성, 확장 가능성 증가
3. 재사용성 (Reusability)
   • 공통 기능을 가진 컴포넌트 재사용 → 효율성 증가
   • 개발 시간, 비용 절약

응집도와 결합도

1. 응집도 (Cohesion)
   • 모듈 내부의 요소들이 서로 얼마나 밀접하게 관련되어있는지
   • 응집도 ⬆️ → 유지보수, 확장성 ⬆️
   • 기능의 완결성 → 재사용, 테스트 용이
   • ex.

     const UserProfile = () => ({ user }) {
     	return (
     		<div>
     			<img src={user.photoUrl} alt={`${user.name}`'s profile`} />
     			<h1>{user.name}</h1>
     			<p>Email: {user.email}</p>
     		</div>
     	);
     }

     • UserProfile 컴포넌트가 사용자의 이름, 사진, 연락처 정보 표시
     • 모든 부분이 ‘사용자 프로필 표시’ 라는 하나의 명확한 목적
2. 결합도 (Coupling)
   • 하나의 모듈이 다른 모듈에 의존하는 정도
   • 결합도 ⬇️ → 독립적인 수정 및 업데이트, 안정성 ⬆️
   • ex.

     function App() {
     	const user = {
     		name: "Jnary",
     		email: "jnary921@gmail.com",
     		photoUrl: "https://example.com/photo.jpg"
     	};
     	return <UserProfile user={user} />;
     }

     • 특정 데이터 형식이나 전형상태에 의존X
     • App 컴포넌트의 나머지 부분과 독립적으로 작동 가능
     • 다른 데이터 소스에서도 ‘user’ 데이터 받을 수 있음

• 잘 설계된 컴포넌트
  • 응집도 ⬆️, 결합도 ⬇️
  • 각 컴포넌트가 명확하고 독립적인 기능 수행
  • 다른 부분과의 의존성 최소화
  • 전체 시스템의 유연성, 확장성 향상