응집도를 세부적으로 나누면 기능 / 순차 / 통신 / 시간 / 절차 / 논리 / 우연 으로 나눌 수 있다.
앞에 있는 응집도를 가지는 것이 뒤에 있는 응집도를 가지는 것보다 좋다고 말할 수 있다.
기능적 응집도
모듈 안에 모든 요소들이 모듈의 기능을 위해서 작동하는 것을 말한다.
모듈이 하나의 기능만 하고 모델 요소들은 이 하나의 기능을 위해서 필수적인 부분일 때 높은 기능적 응집도를 가진다. 따라서 모듈이 하나의 책임만 가질 수 있도록 작게 나누는 것이 좋다
순차적 응집도
루틴이 순서대로 수행되야 하고 단계마다 정보를 공유하고 동시에 수행될 때, 완전한 기능을 제공하지 못하는 연산들 포함할 때 존재하게 된다.
class PlayTime {
어제게임시간;
오늘게임시간;
총게임시간;
constructor(어제게임시간, 오늘게임시간) {
this.어제게임시간 = 어제게임시간;
this.오늘게임시간 = 오늘게임시간;
}
// before
평균게임시간계산() {
const 총게임시간 = this.어제게임시간 * this.오늘게임시간;
return 총게임시간 / 2;
}
//after
총게임시간계산() {
return this.어제게임시간 * this.오늘게임시간;
}
평균게임시간계산() {
return 총게임시간계산() / 2;
}
}통신적 응집도
모듈이 같은 데이터를 사용하지만 서로 아무런 관련성이 없을 때 발생한다.
각 모델이 하는 일이 다르지만 같은 데이터를 사용하기 때문에 응집도가 발생한다.
어떤 모듈이 전달되는 데이터를 가지고 무엇을 출력하고 그 데이터를 초기화하는 기능을 하고 있다면 이 기능들은 같은 데이터를 사용한다는 것을 제외하고 아무런 관계가 없다. 더 나은 응집도를 위해서는 데이터를 초기화하는 것을 출력하고 나서 하는 것이 아니라 데이터를 생성하느 곳에서 해야 한다.
시간적 응집도
여러 연산이 동시에 수행되어햐 해서 하나의 로직으로 결합될 때 발생하는 응집도이다.
어떤 모듈을 초기화하고 수행하고 정리하는 로직이 서로 연관되어 있을 때 이 응집도가 발생한다.
절차적 응집도
실행 순간에 따라 그룹화될 뿐만 아니라 특정 순서로 실행되어야 함으로 응집도가 높아진다.
논리적 응집도
여러가지 기능을 하나의 루틴에서 수행할 때 루틴에 전달되는 조건에 따라 수행하는 기능이 다른 경우 발생한다.
// before
const handleChange = (e) => {
const { name, value } = e.target;
if (name === 'phone') {
onChange(value.replace(/-/g, ''));
return;
}
onChange(value);
}
return(
<>
<Name
name="name"
onChange={handleChange}
/>
<PhoneNumber
name="phone"
onChange={handleChage}
</>
)
// after
const handleChangeName = (e) => {
const { name, value } = e.target;
onChange(value);
}
const handleChangePhone = (e) => {
const { name, value } = e.target;
onChange(value.replace(/-/g));
}
return(
<>
<Name onChange={handleChangeName />
<PhoneNumber onChange={handleChangePhone} />
</>
)함수 안에서 넘어오는 플래그를 이용해서 다른 동작을 하게 해서는 안 된다.
플래그를 이용해서 다른 동작하는 것은 두개의 일을 하고 있다는 것이다.
그리고 플래그에 따라 다르게 동작하다는 것을 예측하기 어렵기 때문이다.
우연적 응집도
모듈의 요소들이 특별한 연관관계를 맺지 않을 때 발생하는 응집도다.
모듈의 요소들이 완전히 무작위로 그룹화된다는 것을 의미한다.
높은 응집도를 위해서는?
높은 응집도가 있는 컴포넌트를 만들려면 컴포넌트의 목적을 명확히 하고 이 목적을 위해 데이터와 메소드가 똘똘 뭉치게 해야 한다.
그리고 하나의 컴포넌트가 하나의 일만 해야 한다.
왜 높은 응집도인 컴포넌트를 만들어야 하나?
- 이해하기 쉽다.
- 의도를 파악하기 쉽다.
- 테스트 하기 쉽다.
결론
-
응집도는 컴포넌트를 나누는 기준이 된다.
-
응집도는 모듈의 목적을 위해 요소들이 밀접하게 연관되어 있는 것을 말한다.
-
높은 응집또 있는 모듈은 이해하기 쉽고 의도를 파악하기 쉽게 하고 그리고 테스트 하기 쉽게 만들어준다.
-
테스트를 작성하여 응집도가 높은지 낮은지 파악해 볼 수 있으며 응집도에 따라 컴포넌트를 분리할 수 있다.
