UI 컴포넌트에 DTO를 전달하지 마세요

DTO란 무엇인가?

DTO(Data Transfer Object)는 소프트웨어 개발에서 애플리케이션의 서브시스템 간 데이터를 전송하기 위해 사용되는 디자인 패턴입니다. RESTful API에서는 주로 전송되고 수신될 데이터의 구조를 정의하는 데 사용되며, 프론트엔드와 백엔드 간의 원활한 통신을 도와줍니다.

문제점

프론트엔드 개발자들은 종종 API나 백엔드 서비스로부터 데이터를 받아 UI(User Interface) 계층, 특히 애플리케이션의 컴포넌트에서 이를 렌더링합니다. 이러한 데이터는 DTO로 명명되며, 컴포넌트의 props, 매개변수 또는 의존성 주입을 통해 직접 전달될 때 다음과 같은 문제가 발생할 수 있습니다:

• 높은 결합도: 컴포넌트가 백엔드 데이터 계층과 강하게 결합되어 유지보수와 재사용성이 저하됩니다.
• 변경의 어려움: 백엔드 데이터 계약이 변경되면 UI 컴포넌트의 인터페이스를 수정해야 하여 코드의 진화나 리팩토링이 어려워집니다.
• 단일 책임 원칙 위반: 컴포넌트가 데이터 전달과 UI 렌더링이라는 두 가지 책임을 가지게 되어 코드의 응집력이 떨어집니다.
• 최소 권한 원칙 위반: 컴포넌트가 불필요한 데이터에 접근하게 되어 보안과 관리 측면에서 문제가 발생할 수 있습니다.

해결 방안

이러한 문제를 해결하기 위해 소프트웨어 아키텍처를 잘 정의하고 계층 분리를 신중하게 고려하는 것이 중요합니다. 데이터 계층을 명확히 분리하여 DTO와 UI 컴포넌트 간의 중간 단계를 도입함으로써 컴포넌트가 직접 DTO에 의존하지 않도록 설계할 수 있습니다. 이를 통해 컴포넌트의 결합도를 낮추고, 유지보수성과 재사용성을 향상시킬 수 있으며, 코드의 책임을 명확히 분리할 수 있습니다.

함께 읽으면 좋은 참고 자료

• SOLID 원칙
• 클린 아키텍처
• 프론트엔드 아키텍처 패턴

[출처] Não passe DTO's para componentes de UI