Adapter 패턴 사용하기 (feat. React, TanStack Query)

Adapter 패턴에 대해 아시나요? 이 패턴은 인터페이스가 다른 두 객체를 이어주는 방법을 제공합니다. 프론트엔드에서 이런 상황이 가장 많이 발생하는 곳은 API 응답값과 컴포넌트에서 사용하는 속성간의 구조차이(인터페이스 차이)가 있습니다.

이번에 소개해드리는 글은 이러한 차이를 Adapter 패턴을 통해 해소하는 방법을 소개합니다.

DTO를 사용하는 것과 큰 차이를 못 느낄 수도 있지만, 이 패턴은 단순히 데이터의 구조가 다를 때만 사용하는 게 아니라 인터페이스, 즉 메서드(행동)의 인터페이스가 다른 경우에도 사용할 수 있으므로 알아두면 의외의 도움이 되리라 생각합니다.

그 밖에 TanStack Query에서 데이터를 변환하는 방법에 대한 좋은 아티클도 남깁니다 :)