프론트엔드/React

컴폰넌트 설계 - 관심사의 분리

학습하는 청년 2024. 5. 1. 19:37

최종 수정 : 2024-05-01

관심사의 분리

컴퓨터 프로그램을 관심사 별로 구별해서 분리하는 설계 원칙을 말한다. 단순히 시스템을 분리되지 않는 파트들로 조각내는 것이 아니라 시스템을 반복하지 않고 각각의 책임을 가진 요소들로 구성하는 것을 목표로 한다. 여기서 말하는 책임은 특정 코드가 수행해야 하는 동작이라고 생각하면 된다.

 

분리를 위해서는 기준이 필요한다. 그 기준은 주어진 책임을 설명하는 논리적이거나 물리적인 제한을 의미한다. 소스 구성에 대한 프로젝트, 폴더 구조를 포함하기도 한다.

효과

  • 컴포넌트의 불필요한 반복이 없어지고, 책임이 단일화되기에 전체 시스템을 유지보수하기 쉬워진다.
  • 시스템 전체의 유지보수성이 향상되므로 더 안정적이게 된다.
  • 각각의 컴포넌트가 단일 책임으로 자신의 관심사만 집중해서 확장 가능성을 만든다.
  • 고유한 책임들이 잘 나누어지면 팀 간의 필요한 협력을 최소화시키고, 각 팀이 그들의 책임과 핵심 경쟁력에 집중할 수 있게 해준다.

분리의 관점

둘 중 하나를 선택해야 하는 것이 아니라, 필요에 따라 이 둘을 함께 적용할 수도 있다.

1. 수평적인 분리

수평적인 관심사는 애플리케이션 내에 동일한 역할을 수행하는 기능의 논리적 단위로 분리한다. 크게 세 개의 층위로 구분할 수 있다.

  • Presentation Layer : 보이는 요소인 HTML, CSS, UI에 필요한 상태관리로 이루어진 UI 컴포넌트
  • Business Layer : 비즈니스 로직과 정책 등에 관련된 컴포넌트
  • Resource Access Layer: 유저에게 제공할 데이터를 받기 위해 백엔드 서버에 요청, 로컬 스토리지 접근, 외부 api 서버 요청 등 외부 정보 접근과 관련된 훅 또는 함수

문제를 빠르게 발견해 고칠 수 있고, 변경이 필요한 경우 빠르고 정확하게 반영할 수 있어 유비보수가 쉬원진다. 그리고 반복해서 필요한 UI, 비즈니스 규칙, 데이터 요청 등을 재사용하기 쉬워진다.

 

Presentational & container(또는 Smart and Dumb) 패턴

Presentational 컴포넌트는 사용자가 보고, 조작하는 UI 컴포넌트이다. UI 만을 위한 상태를 제외하고는 상태를 가지지 않고 Container 컴포넌트가 내려준 props를 통해 조작된다. Container 컴포넌트는 데이터를 받거나 비즈니스 로직을 설정할 수 있고, UI 컴포넌트를 포함할 수 있고, UI 컴포넌트에 props를 전달해 UI를 조작한다.

(다양한 패턴)

 

데이터 접근 분리

Container 컴포넌트에 데이터를 받아오는 부분이 있는 경우가 많은데, 이는 분리할 수 있다. 이때 리액트의 커스텀 훅을 활용하면, 데이터 접근 로직만 분리해서 재사용도 가능하다.

 

유틸리티 함수 분리

유틸리티 함수란 계산과 처리를 대신하는 일반 함수를 말한다. UI 컴포넌트, 데이터 접근을 위한 훅, 비즈니스 로직 등을 만들다 보면 유틸리티 성격의 함수들을 사용하게 된다. 이런 함수들도 분리할 수 있다. 분리를 통해 재사용성을 높이고, 분리된 환경에서 유틸리티 함수만 테스트하기도 쉬워진다.

 

  • UI 컴포넌트 -> ui
  • 데이터 접근 -> data-access
  • 데이터 접근을 제외한 Container 컴포넌트 -> feature
  • 유틸리티 함수 -> util

이처럼 관심사들을 분리했는데, 의존성을 아무렇게 가져가면 분리한 의미가 없어지게 된다는 점을 유의해야 한다. 예를 들어, ui 컴포넌트에서 특정 data-access 훅을 import 해서 사용한다면 ui 컴포넌트는 data-access 훅에 의존하는 컴포넌트가 된다. 이렇게 되면 ui 컴포넌트에 다른 data-access 사용이 필요한 경우 사용할 수 없게 된다. 그렇다면, ui 컴포넌트가 다른 ui 컴포넌트를 의존하는 경우에는 어떨까? 그 자체로 새로운 ui 컴포넌트가 되고 다른 도메인에서 사용하는데 문제가 될 것은 없다. 이런 원리로 의존성을 정리해보면 다음과 같다.

  • ui : ui, util에 의존할 수 있다.
  • data-access : data-access, util에 의존할 수 있다.
  • feature : feature, ui, data-access, util 모두에 의존할 수 있다.
  • util : util 끼리만 의존할 수 있다.

 

2. 수직적인 분리

수직적인 관심사는 애플리케이션의 동일한 도메인을 모듈로 묶어서 분리한다. 이는 각 도메인의 책임을 분명하게 한다. 또한 서로 다른 개발조직이 각각의 모듈에 집중할 수 있어 관리하기 편하다.

 

저작자표시 비영리 변경금지