[카카오테크 부트캠프] 아키텍쳐 패턴의 기본 개념

소프트웨어 아키텍쳐와 디자인 패턴

• 소프트웨어 아키텍처란 소프트웨어 시스템의 구조를 정의하고 설계하는 과정입니다.
• 이는 시스템의 구성 요소 간의 상호작용 방식, 데이터 처리 방법, 사용자 인터페이스와의 상호작용 방식 등을 포함합니다.
• 아키텍처는 시스템의 성능, 안정성, 보안성 등 전반적인 품질 속성에 큰 영향을 미칩니다.
• 아키텍처 패턴은 특정 문제를 해결하기 위해 반복적으로 사용할 수 있는 설계 패턴이며, 이는 소프트웨어 아키텍처를 구성하는 핵심 요소 중 하나입니다.
• 아키텍쳐 패턴은 공통된 설계 문제를 해결하는 방법을 제시하고, 이를 통해 코드의 재사용성, 유지보수성, 확장성을 향상시킵니다.

단순한 프로젝트 구조의 문제점

1. 구조화와 유지보수성의 부족

• 단일 컴포넌트 패턴만 사용하여 대규모 애플리케이션을 개발한 경우, 모든 기능을 하나의 컴포넌트에 집어넣어 코드가 길어지고 복잡해집니다.
• 각 기능을 독립적으로 테스트하거나 변경하기 어려워집니다.
• 또한, UI 로직과 비즈니스 로직이 섞이면서 코드의 가독성이 저하되고유지보수가 어려워집니다.

2. 상태 관리의 어려움

• React 컴포넌트 간에 직접적으로 상태를 전달하거나 상위 컴포넌트에서만 상태를 관리하는 경우, Props drilling이 발생하거나 상태가 여러 컴포넌트에 분산되어 있을 수 있습니다.
• 이로 인해 데이터의 일관성 유지가 어렵고, 디버깅과 테스트가 어려워질 수 있습니다.

3. 비즈니스 로직과 UI 로직의 혼합

• 비즈니스 로직과 UI 로직 모두를 단일 컴포넌트에 포함한 경우, 비즈니스 로직과 UI 로직이 혼합되어 코드의 재사용성이 저하됩니다.
• 동일한 로직을 여러 컴포넌트에서 중복해서 작성해야 할 수 있으며, 이는 코드의 중복과 복잡성을 증가시킵니다.
• 코드의 중복과 복잡성은 프로젝트의 유지보수성을 떨어뜨리고, 확장성을 제한할 수 있습니다.
  또한 이러한 점들 때문에, 새로 합류한 개발자나 다른 팀원이 코드를 이해하고 수정하기 어려울 수 있습니다.

 

• 이와 같은 문제들은 애플리케이션의 복잡성과 규모가 커질수록 심각해질 수 있으므로, 적절한 아키텍쳐 패턴을 선택하는 것이 중요합니다.
• 패턴을 적용함으로써 코드의 구조화와 관리가 개선되어 유지보수성과 확장성을 높이며, 팀 내 협업도 원활하게 할 수 있습니다.

React에서의 아키텍쳐 패턴의 중요성

• 코드 구조화와 모듈화
  • 컴포넌트 기반 접근 방식과 함께 아키텍쳐 패턴은 코드를 논리적으로 구조화하고 모듈화할 수 있는 방법을 제공합니다.
  • 이는 코드의 가독성을 높이고 유지보수를 용이하게 만듭니다.
• 유지보수성 및 확장성 향상
  • 각각의 아키텍쳐 패턴은 특정 문제를 해결하도록 설계되어 있어, 시스템이 변화하거나 성장할 때 쉽게 적용할 수 있습니다.
  • 이는 시스템의 유지보수성을 높이고, 새로운 요구사항에 대응할 수 있는 확장성을 제공합니다.
• 개발자 팀 간의 협업 효율성 증대
  • 일관된 설계 패턴을 사용하면 개발자 팀 간의 협업이 효율적으로 진행될 수 있습니다.
  • 각자가 이해할 수 있는 구조와 코드 스타일을 제공함으로써, 개발 프로세스의 일관성을 유지할 수 있습니다.

React에서의 아키텍쳐 패턴 종류

• 단일 컴포넌트 패턴 (Single Component Pattern)
• 컨테이너 / 프레젠테이셔널 패턴 (Container / Presentational Pattern)
• HOC 패턴 (Higher-Order Component Pattern)
• Flux 아키텍처 (Flux Architecture)
• 모듈형 아키텍쳐 (Modular Architecture)
• FSD 아키텍쳐 (Feature Sliced Design Architecture)
• 이 외에도 다양한 종류의 아키텍쳐 패턴 종류가 존재

-> 여러 아키텍처와 패턴을 숙지하고 있다가, 각 프로젝트의 상황에 따라서 선택