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

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

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’ 데이터 받을 수 있음

• 잘 설계된 컴포넌트

  • 응집도 ⬆️, 결합도 ⬇️

  • 각 컴포넌트가 명확하고 독립적인 기능 수행

  • 다른 부분과의 의존성 최소화

  • 전체 시스템의 유연성, 확장성 향상

[velog 많관부](https://velog.io/@jnary/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EB%B6%84%EB%A6%AC%ED%95%98%EB%8A%94-%EA%B8%B0%EC%A4%80%EA%B3%BC-%EB%B0%A9%EB%B2%95)