React 서버 컴포넌트: 프런트엔드 데이터 가져오기 문제 해결

2025-04-15

이 글에서는 React 서버 컴포넌트가 프런트엔드 데이터 가져오기의 복잡성을 어떻게 해결하는지 살펴봅니다. 기존 REST API는 지속적으로 변화하는 UI 요구사항에 맞추기 어려워 데이터 중복이나 부족으로 이어집니다. 저자는 BFF(Backend for Frontend) 접근 방식을 제안하여 ViewModel 개념을 백엔드에 도입함으로써 서버가 각 컴포넌트에 필요한 특정 데이터를 직접 반환할 수 있도록 합니다. ViewModel 함수를 더 작은 단위로 분해하고 JSX를 활용하여 컴포넌트와 데이터 로딩 로직 간의 긴밀한 결합을 달성하여 효율적이고 유지보수가 용이한 프런트엔드 아키텍처를 구축합니다. 이 방법은 데이터 가져오기와 UI 렌더링을 매끄럽게 통합하는 Async XHP와 유사하지만, 상호작용이 많은 애플리케이션에서 Async XHP의 한계를 피합니다.