[데브코스] TIL-132 React, 컴포넌트심화

컴포넌트 심화

1. 아키텍처

  아키텍처는 우리가 일을 잘 하기 위한 방법이다. 그러기 위해서는 모듈의 구현과 나누는 방법을 잘 정하는 것이 필요하다. 모듈에서 중요한 것은 응집도와 결합도다.

2. 응집도

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

 

공통 폐쇄 원칙

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

공통 재사용 원칙

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

  두 원칙을 하나만 골라서 사용해야 하는 것은 아니다. 상황에 따라 이 사이를 적절하게 조절하는 것이 필요하고, 그것이 개발자의 능력이라고 볼 수 있다.

3. 결합도

  다른 모듈과의 의존성에 대한 정도를 뜻한다. 모듈과 모듈 사이의 관계가 어느 정도인지를 나타낸다. 낮은 결합도일 수록 좋은 설계며, 안정성이 증가한다. 결합도가 높으면 수정에 대해 많은 영향을 줄 수 있고, 어디서 버그가 터질지 모른다.

안정된 의존성 원칙

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

안정된 추상화 원칙

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

 

오늘을 마무리 하며

 

  오늘은 그 동안 코드를 작성해 오던 나의 모습들을 돌이켜보는 시간을 보낸것 같다. 그 동안에는 사실 정상적으로 동작하게 하는데 급급했고, 그 와중에 컴포넌트를 어떻게 분리하면 좋을지에 대한 생각을 짧게 짧게 했던 것 같다. 그런데 오늘 강의를 듣고 난 다음에 생각을 해보니 명확한 기준 없이 대~충 컴포넌트를 분리하면서 코드를 작성해 왔다는 생각이 들었다. 여기서 모든 원칙들에 대해 외우는것은 불필요한 일이라고 생각한다. 하지만 한 가지 명확하게 기억해 놓으면 좋다고 생각한 것은 응집도는 높을수록 결합도는 낮을수록 좋은 설계라는 것이다. 이 점을 기억하면 코드를 작성할 때 일정한 나만의 기준을 만들고 적용할 수 있을 것 같다!!!! 그리고 작업을 진행하기 전에 충분한 고민을 통해 컴포넌트들을 어떻게 구성하면 좋을지 고민하는 시간을 더 가져가야겠다. 오늘은 뭔가 기준을 세울 수 있는 포인트들을 배운 것 같아 기분이 좋다! 누가봐도 깔끔하고 멋진 설계를 할 수 있는 그날까지 화이팅이다!!!!!