React - 컴포넌트 심화

컴포넌트는 어떻게 설계해야할까?

경험도 중요하지만 이론도 어느정도 중요하다.

 

설계하면 아키텍처가 떠오른다.

아키텍처의 기본을 알아보자

 

아키텍처는 목표하는 대상에 대하여 그 구성과 동작 원리, 구성 요소 간의 관계 및 시스템 외부 환경과의 관계 등을 설명하는 설계도 혹은 청사진을 말한다

 

쉽게 말하면 

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

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

 

 

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

응집도란?

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

높은 응집도는 하나의 모듈에서 필요한 기능들이 모두 사용되고 있는 것이고,

낮은 응집도는 하나의 모듈에서 필요한 기능들이 다른 모듈에 퍼져있는 것이다.

 

높은 응집도를 위한 방법은?

공통 폐쇄 원칙

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

공통 재사용원칙

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

 

 

-> 상황에 따라 이 두가지 원칙을 적절하게 조절하는 것이 개발자의 능력

 

결합도란?

 

- 다른 모듈과의 의존성에 대한 정도

- 모듈과 모듈 사이의 관계가 어느정도인지를 나타낸다.

- 낮은 결합도일 수록 좋은 설계

-결합도가 높을 수록 수정에 대해 영향을 미치는 정도가 증가한다.

- 따라서 낮은 결합도일 수록 안정성이 증가한다.

- 결합도가 높으면 어디서 버그가 터질지 두근두근 해진다.

낮은 결합도는 A모듈과는 전혀 관계가 없다.

높은 결합도는 A모듈이 다른 모듈들을 의존하고 있을 때를 말한다.

이는 결국 다른모듈에서 수정이 되면 A모듈에도 영향을 미친다.

 

낮은 결합도를 위한 방법은?

안정된 의존성 원칙

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

안정된 추상화 원칙

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

 

React 컴포넌트의 추상성 계산

• Domain, Style, Semantic, Data, Network, Event, Route, Device, Context라는 9가지 요소가 있다.
• 컴포넌트가 이 요소 중 고정적으로 사용된다면 해당된다.
• 위 요소 중 [1- 해당하는 부분/ 9] 로 계산해보자.
• 외부에서 주입받아 제한이 없다면 추상적인 것으로 본다.
• 단 주입받는 요소가 특정 값으로 제한된다면 구체적인 것으로 본다.
• 대략 적으로 계산하는 방법이기 때문에 정확할 수는 없다.
• 예를 들어 Text컴포넌트는 Sementic이 고정적이르모 0.888... 로 계산된다.

- Fragment이기 때문에 Sementic도 의미가 없고, 어떠한 요소도 들어올 수 있다. 

- 하지만 이런 컴포넌트는 쓰지 않는다.

 

 

 

하지만 경험이 중요하다.

너무 규칙에 얽매이지 말자

컴포넌트의 가장 큰 장점은 새로 만들기 쉽다는 점이다.