[리액트] 컴포넌트 기반 아키텍처

컴포넌트 기반 아키텍처 :
UI를 독립적이고 재사용 가능한 컴포넌트 단위로 나누어  개발하는 방법

---

컴포넌트 : React에서 UI의 기본 단위	장점
자체적인 상태 & 생명 주기를 가짐 특정한 기능을 수행하도록 설계됨 Javascript 함수 또는 클래스 형태로 정의 JSX를 사용하여  UI 구조를 선언적으로  표시 서로 조합해 복잡한 .UI 구성 가능 → 레고와 비슷	재사용성 : 동일한 컴포넌트 여러곳에 재사용 가능 개발 효율성 : 한번 정의하면 다양한 페이지에 일관되게 사용 가능 디자인 시스템 구축, 유지에 도움

 

 1. 컴포넌트의 캡슐화

• 캡슐화를 통해 외부로 부터 자신의 내부 구현을 숨길 수있다.
• 상태와 메서드 외부에 노출 X 
• 오직 props를 통해서만 데이터를 주고받음

→ 유지 보수성 크게 향상 :  컴토넌트 간의 결합도 낮추고 독립적으로 개발 및 테스트 가능하게 함 

 

2. 단방향 데이터 흐름

• 부모 컨포넌트는 자식 컨포넌트에 데이터를 전달할 수 있음
• 자식 컨포넌트는 부모 컨포넌트에 데이터를 직접 수정할 수 없음

→ 상태 변화 예측 가능 , 디버깅 용이 

(상태 관리 라이브러리 Redux나 Context API와 같은 도구들은 이러한 단방향 데이터 흐름을 강화하여 대규모 애플리케이션의 상태 관리를 더욱 체계적으로 할 수 있도록 도움)

 

3. 테스트 용이성 제공

• 독립적으로 테스트 가능
• 단위 테스트를 통해 컴포넌트의 기능 검증에 용이
• Jest나 React Testing Library :  렌더링 결과와 상호작용을 테스트하는데 유용한 기능을 제공한다

→ 안전성 높임, 새로운 기능 추가나 리팩토링 시 생길 수 있는 버그를  미연에 방지 가능