응집도? 결합도?

• 소프트웨어 아키텍처 및 디자인 관련한 중요한 개념
  • 코드의 품질을 향상
  • 유지보수성을 높임
  • 개발하는 모든 분야에서 적용 가능한 개념

응집도(Cohesion)

• 모듈 또는 컴포넌트 내부의 요소들이 얼마나 밀접하게 관련되어 있는가
• 높은 응집도를 가진 모듈 혹은 컴포넌트다?
  • 하나의 기능 또는 책임을 수행 (SRP: 단일 책임 원칙)
  • 코드의 가독성을 향상시키고 유지보수를 쉽게 만듦

예시

• 버튼을 렌더링하는 컴포넌트

  • 이 컴포넌트는 버튼의 텍스트, 스타일, 클릭 핸들러 등을 관리
  • 모든 관련 코드가 이 컴포넌트 내부에 존재(버튼 렌더링과 관련된 모든 로직)

  ⇒ 해당 컴포넌트는 높은 응집도를 지닌다

결합도(Coupling)

• 모듈 또는 컴포넌트 간의 의존성 정도를 나타냄
• 낮은 결합도를 가진 모듈은 다른 모듈과의 상호작용을 최소화하며, 독립적으로 변경 가능
  • 코드의 재사용성을 높이고, 수정 및 유지보수를 용이하게 만듦.

예시

• 상위 수준 컨테이너 컴포넌트와 하위 수준 프레젠테이션 컴포넌트로 구성된 구조

  • 상위 컨테이너 컴포넌트는 하위 컴포넌트에 데이터를 제공
  • 하위 컴포넌트는 상위 컴포넌트와 상호작용하는 책임을 가짐
  • 이 두 컴포넌트는 서로 독립적으로 변경될 수 있다

  ⇒ 두 컴포넌트는 낮은 결합도를 보인다

<aside> 💡 높은 응집도, 낮은 결합도를 기억하자

</aside>

코드로 예를 들자면

import React, { useState } from 'react';

// 할일 목록 항목 컴포넌트
function TodoItem({ text, onDelete }) {
  return (
    <div>
      <span>{text}</span>
      <button onClick={onDelete}>삭제</button>
    </div>
  );
}

// 할일 목록 컴포넌트
function TodoList() {
  const [todos, setTodos] = useState([
    'React 공부하기',
    '컴포넌트 설계하기',
    '상태 관리 구현하기',
  ]);

  // 할일 삭제 함수
  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <h2>할일 목록</h2>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <TodoItem text={todo} onDelete={() => deleteTodo(index)} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;