🖍️ 컴포넌트 설계시 중요한 요소는?

@ 재사용성

• 중요한 이유

  • 효율성

    재사용 가능한 컴포넌트는 유사한 기능에 대한 
    새 코드를 작성할 필요성을 줄여 개발 프로세스를 가속화

  • 일관성

    애플리케이션 전체에서 일관된 모양과 느낌을 보장
    이는 사용자 경험에 필수

  • 확장성

    코드를 복제하지 않고 새로운 기능을 
    더 쉽게 추가할 수 있도록 하여 응용 프로그램을 쉽게 확장

• 달성 방법

  • 제네릭 디자인

    다양한 컨텍스트에서 사용할 수 있을 만큼 
    일반적인 컴포넌트를 빌드
    
    단일 사용 사례와 관련된 값과 기능을 하드 코딩 X

  • 사용자 정의 Props

    props를 사용하여 컴포넌트를 사용자 정의 가능
    
    props은 스타일, 동작, 데이터와 같은 다양한 측면을 제어 가능

  • 상속보다는 합성

    컴포넌트 기능을 확장하기 위해 
    상속보다 컴포지션을 선호
    
    이 접근 방식은 더 유연하며 
    React와 같은 라이브러리의 구성 요소 기반 특성에 잘 맞음

  • 문서

    예제 및 소품 설명을 포함하여 
    컴포넌트를 사용하는 방법에 대한 명확한 문서를 제공

@ 유지 보수성

• 중요한 이유

  • 업데이트 용이성

    유지 관리 가능한 코드를 쉽게 업데이트하고 확장 가능
    
    이는 버그를 해결하고, 기능을 개선하고, 
    새로운 요구 사항에 적응하는 데 매우 중요

  • 기술 부채 감소

    코드를 잘 유지 관리하면 기술 부채가 줄어들어 
    코드베이스에 병목 현상이 발생하는 것을 방지

  • 협업 효율성

    팀 환경에서 유지 관리 가능한 코드는 
    다른 사람들이 더 쉽게 이해하고 작업할 수 있으므로 협업이 향상

• 달성 방법

  • 클린 코드

    명확하고 이해하기 쉬운 코드를 작성
    코딩 규칙과 모범 사례를 따름

  • 컴포넌트 구조

    요소를 논리적으로 구성
    파일과 폴더는 용도와 관계를 반영하는 방식으로 구조화

  • 주석

    특히 복잡한 논리의 경우 특정 선택이 이루어진 이유를 
    설명하기 위해 필요한 경우 주석을 사용

  • 테스트

    컴포넌트에 대한 단위 및 통합 테스트를 작성
    이렇게 하면 컴포넌트가 예상대로 작동하고 
    향후 회귀를 방지하는 데 도움

  • 리팩토링

    컴포넌트를 정기적으로 리팩토링하여 코드 품질 개선
    새로운 요구사항 적용