[React] React 심화(1)

❗❗  데브코스 70일차 (11.5)

중간 프로젝트가 끝난 뒤, React 강의가 계속 진행됐다.

React 심화과정으로 진행이 된다. 오늘은 간단한 사용자 정의 Hook 하나와 (언급 x)

컴포넌트 설계에 대해 간략하게 다뤄볼 예정이다.

 

✅ 컴포넌트는 어떻게 설계해야 하는가?

아키텍처는 우리가 일을 잘 하기 위한 방법

그러기 위해 모듈의 구현과 나누는 방법을 정한다.

모듈에서 중요한 것은 응집도와 결합도

 

✅ 응집도

• 모듈 내에 포함된 요소들이 서로 연관되어 있는 정도
• 모듈 내 기능들이 하나의 책임으로 잘 뭉쳐있는지를 나태냄
• 높은 응집도일 수록 좋은 설계
• 응집도가 높을 수록 하나의 책임에 집중하고 독립성을 높이면서 수정하기 위한 요소를 빠르게 찾을 수 있기 때문

 

✍ 높은 응집도를 위한 방법

공통 폐쇄 원칙

• 동일한 시점에 변경되는 기능을 하나의 모듈로 묶어야 한다는 원칙
• 객체지향 원칙인 단일 책임 원칙을 컴포넌트 관점으로 바라본 것
• 과하게 적용하면 재사용성이 줄어들 수 있다..
• ex) 컴포넌트에 종속된 기능, 스타일 등을 묶기

Tab, TabPanel이 종속되어 있다면 폴더를 통해 컴포넌트끼리 묶는 것도 괜찮다.

 

공통 재사용 원칙

• 모듈 내의 기능들은 함께 재사용이 될 수 있어야 한다는 원칙
• 재사용이 될 수 없다면 분리해야 한다는 뜻
• 과하게 적용하면 개발 용이성이 줄어들 수 있다.

Avatar, Button은 함께 독립된 모듈이므로 분리해야 한다.

 

공통 폐쇄 원칙은 적은 수의 컴포넌트로 개발은 용이하지만 재사용성이 낮고,

공통 재사용 원칙은 많은 수의 컴포넌트로 개발은 어렵지만 재사용성이 높다.

즉, 두 원칙을 골고루 사용하여 상황에 따라 특정 원칙에 맞게 사용하면 된다.

 

✅ 결합도

• 다른 모듈과의 의존성에 대한 정도
• 모듈과 모듈 사이의 관계가 어느 정도인지를 나타낸다.
• 낮은 결합도일 수록 좋은 설계 (안정성이 증가)
• 결합도가 높을 수록 수정에 대해 영향을 미치는 정도가 증가한다.

 

✍낮은 결합도를 위한 방법

안정된 의존성 원칙

• 더 안정된 모듈을 의존하자는 원칙
• 의존하는 모듈이 적고 의존되는 모듈이 많을 수록 안정적인 모듈(컴포넌트)이다.
• 안정성 지표는 Fan-out / (Fan-in + Fan-out) 으로 계산
• 0에 가까울 수록 안정되고 1에 가까울 수록 불안정한 컴포넌트
• 변화에 무겁도록 만들어야한다.

 

안정된 추상화 원칙

• 컴포넌트는 안정된 만큼 추상적이어야 한다는 원칙
• 추상성은 추상 클래스 수 / 클래스 수로 계산된다.
  • React 컴포넌트는 UI 요소가 포함되어 있어 이런식으로 계산이 어려움
• 레이어를 잘 나눠야한다.

 

👨‍💻프론트엔드는 변화가 큰 소프트웨어를 백엔드처럼 기능, 도메인 단위로 레이어를 나누기엔 애매하다.

웬만하면 추상화 단위로 나누는 것이 UI의 특성도 반영되기 때문에 편하다.

 

이러한 컴포넌트 설계는 처음부터 잘하기가 어렵다. 경험과 숙련도에 따라 나아지기 때문에

너무 규칙에 얽매이지 말고 적절히 새로 만들면서 작업하면 된다.

 

📖 학습한 내용

• React 심화(1)
  • 사용자 정의 Hook - useImperativeHandle
  • 컴포넌트 설계 이론