리액트 컴포넌트 기반 구조 이해하기(WITH 재사용성, 유지보수성)

1 React의 컴포넌트 기반 구조란?

1.1 컴포넌트란

• react에서 컴포넌트는 UI를 구성하는 최소 단위
• HTML, CSS, JS를 하나의 독립적인 블록으로 결합한 구조
• 컴포넌트는 함수형과 클래스형으로 나뉨

1.2 컴포넌트의 특징

• 독립성 : 컴포넌트는 다른 컴포넌트와 독립적으로 동작
• 재사용성 : 동일한 컴포넌트를 여러 곳에서 사용 가능
• 구성 가능성 : 여러 컴포넌트를 조합해 복잡한 UI를 설계 가능

2 컴포넌트 기반 구조의 재사용성

2.1 재사용성의 정의와 중요성

• 재사용성은 동일한 컴포넌트를 여러 곳에서 반복 사용해 개발 생산성을 높이는 것
• 중복 코드를 줄이고, 코드의 일관성을 유지

2.2 재사용가능한 컴포넌트 설계 방법

• 단일 책임 원칙
  • 컴포넌트는 한가지 책임만 가져야 함
• Props를 활용한 데이터 전달
  • 컴포넌트 간 데이터 전달을 통해 유연한 설계 가능
• 컴포넌트 조합
  • 작은 컴포넌트 결합해 더 큰 컴포넌트 생성

2.3 재사용 가능한 컴포넌트의 예시

• 공통된 UI 요소
• 리스트 렌더링 컴포넌트
• 레이아웃 컴포넌트(헤더, 사이드바, 푸터, ..)

3. 컴포넌트 기반 구조의 유지보수성

3.1 유지보수성이란

• 코드가 변경되거나 기능이 추가될 때 얼마나 쉽게 수정할 수 있는지를 나타내는 지표
• 컴포넌트 기반 구조는 코드 가독성과 관리효율성을 높임

3.2 유지보수성을 높이는 설계 원칙

• 컴포넌트 분리
• 명확한 Props, State 관리
• 디렉토리 구조의 체계화

4. 컴포넌트 기반 구조의 장단점

4.1 장점

• 생산성 증가 : 재사용 가능한 컴포넌트로 개발 속도 향상
• 확장성 : 기존 컴포넌트를 조합하거나 확장해 새로운 기능 추가 가능
• 디버깅 용이 : 문제 발생 시 특정 컴포넌트로 원인을 좁힐 수 있음

4.2 단점

• 초기 설계와 분리 작업에 시간이 걸림
• 지나치게 많은 컴포넌트 분리는 오히려 복잡성을 증가시킬 수 있음