Documentation

Data Transformer

한 데이터 스키마를 다른 스키마로 매핑해, API 데이터를 UI 에 맞게 변환하기

3 min read

Data Transformer 는 두 Data Schema 사이(From → To)의 매핑을 정의하는 프로젝트 레벨 타입입니다. 이를 통해 API 가 주는 데이터 형태와 화면이 쓰는 데이터 형태를 분리할 수 있습니다.

왜 필요한가

API 응답을 화면에 바로 바인딩하려면 보통 UI 를 API 의 응답 형태에 맞춰야 합니다. 그러면 API 스펙이 바뀔 때마다 화면도 함께 바꿔야 하고, UI 를 먼저 자유롭게 디자인하기 어렵습니다.

Data Transformer 를 두면 UI 는 자체 데이터 모델(To 스키마) 기준으로 디자인하고, API 응답(From 스키마)을 실행 시점에 변환해 채워 넣을 수 있습니다.

매핑 정의하기

Data Scheme 사이드바에서 Schema·Enum 과 나란히 Data Transformer 를 추가합니다.

  • From / To 스키마 를 선택합니다.
  • 캔버스에 두 스키마가 좌(From)·우(To)로 놓이고, 각 필드에 연결 노드가 생깁니다.
  • 왼쪽(From) 노드를 오른쪽(To) 노드로 드래그해 연결합니다. 타입이 맞는 필드끼리만 연결됩니다.
  • 오른쪽 항목은 하나의 소스만, 왼쪽 항목은 여러 To 필드에 연결할 수 있습니다.
  • 연결선의 오른쪽 끝을 드래그해 빈 곳에 놓으면 삭제되고, 다른 노드에 놓으면 다시 연결됩니다.

폭이 좁은 화면에서는 노드 그래프 대신 필드 목록형 바인딩 UI 로 표시됩니다.

Data Mapper 액션

Data Transformer 를 실제로 적용하는 것은 Action FlowData Mapper 액션입니다.

  • 입력으로 From 스키마 형태의 데이터(단일 값 또는 배열)를 바인딩하고, 사용할 변환기를 선택합니다.
  • 출력은 To 스키마 형태(입력이 배열이면 배열)로 나오며, 이어서 Update Data 등에 넘겨 화면을 갱신할 수 있습니다.

예를 들어 서버에서 Array<Result> 를 받고 Result → Product 변환기를 만들어 두면, Data Mapper 로 Array<Product> 로 바꿔 화면의 List 에 채울 수 있습니다.