⚡ 컴포넌트 잘 설계하기
📌 아키텍처 (Architecture)
- 우리가 일을 잘 하기 위한 방법!
- 모듈의 구현과 나누는 방법을 정한다.
- 모듈에서 중요한 것은
응집도와결합도
⭐ 응집도
- 모듈 내에 포함된 요소들이 서로 연관되어 있는 정도
- 즉, 모듈 내 기능들이 하나의 책임으로 잘 뭉쳐있는지를 나타낸다.
- 높은 응집도일 수록 좋은 설계이다.
🤷♂️ 왜 중요할까?
- 응집도가 높을 수록 하나의 책임에 집중한다.
- 독립성을 높인다.
- 수정하기 위한 요소를 빠르게 찾을 수 있다.
🔷 공통 재사용 원칙
- 모듈 내의 기능들은 함께 재사용이 될 수 있어야 한다는 원칙
- 반대로 이야기하면 함께 재사용이 될 수 없다면 분리해야 한다는 뜻
- 과하게 적용하면 개발 용이성이 줄어들 수 있다.
🔷 공통 폐쇄 원칙
- 같은 이유로 동일한 시점에 변경되는 기능을 하나의 모듈로 묶어야 한다는 원칙
- 객체지향 원칙인 단일 책임 원칙을 컴포넌트 관점으로 바라본 것이다.
- 과하게 적용하면 재사용성이 줄어들 수 있다.
😵💫 무엇을 선택할지에 대해서는 딱히 정답은 없는듯 하다.
상황에 따라 적당히 조절하는 능력을 키울 필요가 있겠다.
⭐ 결합도
- 다른 모듈과의 의존성에 대한 정도
- 모듈과 모듈 사이의 관계가 어느 정도인지를 나타낸다.
- 낮은 결합도일 수록 좋은 설계이다.
🤷♂️ 왜 중요할까?
- 결합도가 높을 수록 수정에 대해 영향을 미치는 정도가 증가한다.
- 낮은 결합도일 수록 안정성이 증가한다.
- 한마디로 결합도가 높으면 버그가 터지는 순간 나락행 열차 탑승이다...
🔷 안정된 추상화 원칙
-
컴포넌트는 안정된 만큼 추상적이어야 한다는 원칙
-
추상성은 추상 클래스 수 / 클래스 수로 계산된다.
- ❗ React 컴포넌트는 UI 요소가 포함되어 있어 이런 식으로 계산할 수 없다.
-
레이어를 잘 나눠야 한다.
🔷 안정된 의존성 원칙
-
더 안정된 모듈을 의존하자는 원칙
- 의존하는 모듈이 적고 의존되는 모듈이 많을 수록 안정적인 모듈(컴포넌트)이다.
-
안정성 지표는 Fan-out / (Fan-in + Fan-out)으로 계산 가능
- Fan-out은 의존되는 것!
- Fan-in은 의존하는 것!
- 0에 가까울 수록 안정되고 1에 가까울 수록 불안정한 컴포넌트
변화에 무겁도록 만드는 것이 중요하다!
컴포넌트 장인을 꿈꾸는 남자의 메모였습니다.
해당 내용 및 그림은 프로그래머스school 에서 제공하였습니다.
Hodie mihi, Cras tibi