응집도

지난 주 테스트 코드에 대해 고민했다.

동시에 단일 책임 원칙에 대해 깊이 공감하고, 실제로 적용하기 위해 노력했다.

컴포넌트를 작성할 때마다, 해당 컴포넌트의 역할이 무엇인지 명확히 정의했다.

어떤 기능을 수행하는가, 이를 수행하기 위해 필요한 함수들은 무엇인가 등을 계속해서 되물었다.

 

그런데 문제.

각 컴포넌트 혹은 함수들의 역할 에만 집중하다보니, 대부분의 로직이 잘게 흩어지게 되었다.

 

물론 단순히 로직이 흩어졌다는 점을 문제라고 할 순 없다.

(하나의 컴포넌트나 함수는 하나의 역할만을 수행해야하니!)

 

하지만 코드를 몽땅 작성하고 돌아보니...

정작 해당 로직들이 합쳐진(특정 단위 기능을 수행해야하는) 모듈에서는

그래서 이 모듈은 무엇을 위해 존재하는거지? 가 혼란스러운 상황에 빠지고 말았다.

 

또한 수정사항이 발생했을 때,

분명 같은 논리 단위 내에서 처리되야할 로직들이 흩어져있다보니

오히려 이를 반영해야할 파일의 개수가 불필요하게 많아진 듯한 느낌이 들었다.

 

https://www.youtube.com/watch?v=aSAGOH2u2rs 

참 신기한게, 어떤 고민을 하고 있으면 꼭 그와 관련된 컨퍼런스들이 우연찮게 눈에 띈다.

위 컨퍼런스에서는 이에 대한 해결 방안으로서 '응집도'를 얘기한다.

단순히 하나의 컴포넌트, 함수가 하나의 역할만을 수행하도록 작성하는 것으로는 부족하다.

해당 컴포넌트들이 합쳐진 모듈의 응집도가 얼마나 높은지를 항상 고려해야한다.

(물론 이 역시, 하나의 모듈 은 하나의 역할 만을 수행해야한단 말로 귀결!)

 

아하!

이러한 기준으로 지난 코드들을 생각해보니...

const Reminder = () => {
	const 리마인더를 조회하고, 해당 리마인더의 미리보기 문구를 설정하는 함수 = () => {
    	...
    }
	const 이전 선택된 시간을 체크하면서, 리마인더 날짜를 변경하면서, 
    불가능한 날짜일 경우 모달을 띄우는 함수 = () => {
        	...
    }
}

위와 같이 작성된 (엉망) 컴포넌트를

const Reminder = () => {
    const 리마인더 조회 = () => {...}
    const 이전 선택 시간 체크 = () => {...}
    const 리마인더 날짜 변경 = () => {...}
    const 불가능한 날짜 판단 = () => {...}
    const 모달 띄움 = () => {...}
}

단순히 아래처럼 나눈 것에 불과했다!

 

각 함수들의 기능을 분리한답시고 했지만... 

정작 해당 함수들을 사용하는 Reminder란 모듈에서는, 단일 책임 원칙을 지키지 못한 것!

(응집도가 굉장히 낮았던 것)

 

따라서

const Reminder = ({불가능 여부, 이전 선택 시간}) => {
    const 리마인더 조회 = () => {...}
    const 리마인더 날짜 변경 = () => {...}
}

const 예약 = () => {
    const 불가능 여부 판단 = () => {...}
    const 이전 선택 시간 체크 = () => {...}
    const 모달 띄움 = () => {...}

    return (    
            {...}
            <Reminder {불가능 여부} {이전 선택 시간} />
            <Modal {모달 띄움}/>
	)
}

Reminder란 모듈의 목적을 명확히 정의하고(리마인더를 조회하고, 날짜를 변경한다)

이와 밀집하게 연관된 컴포넌트, 함수를 해당 모듈에 작성했어야 했다!

describe("Reminder", () => {
  context("리마인더를 조회합니다", () => {
  	...
  });

  context("리마인더의 날짜를 변경합니다", () => {
  	...
  });
  
  context("불가능한 날짜일 경우 불가능 문구가 표시됩니다", () => {
  	...
  });
  
  context("이전 선택 날짜가 있을 경우, 해당 날짜가 표시됩니다", () => {
  	...
  });
});

테스트 역시 한결 작성하기 편하고 명확해질테다!