Documentation

API 응답을 화면에 바인딩하기

API 호출 결과를 화면에 연결하고, 토큰으로 요청 값 채우기

3 min read

API 를 설정했다면 호출 결과를 화면에 연결할 차례입니다. 흐름은 두 단계입니다 — API 를 호출하고, 그 응답을 화면에 바인딩 합니다.

1. API 호출하기

Action FlowAPI Call 액션을 추가하면 HTTP 요청을 보내고 응답을 받습니다. 보통 화면이 나타날 때 데이터를 불러오도록 Page Appear 이벤트에 연결합니다.

응답은 구조화된 형태로 들어옵니다 — HTTPStatusCode, Data, 그리고 상태 코드별 필드.

2. 응답을 화면에 바인딩하기

받아온 응답 데이터는 일반 데이터와 똑같이 컴포넌트에 바인딩할 수 있습니다. 예를 들어 응답으로 받은 배열을 List 에 바인딩하면 서버의 실제 데이터가 화면에 채워집니다.

상태 코드에 따라 다르게 처리하려면 조건과 분기와 함께 사용합니다. (2XX 면 결과 표시, 4XX 면 오류 메시지 등)

요청 값 채우기: 바인딩 토큰

요청을 보낼 때 URL, 헤더, 본문, 인증값에 동적인 값을 넣어야 할 때가 있습니다. 이때 바인딩 토큰 을 사용합니다.

  • {Parameters.필드} — 이 API/플로우에 주입된 입력 파라미터 값
  • {Project.데이터이름.필드} — 프로젝트 데이터의 값

이 토큰은 요청을 보내는 시점에 실제 값으로 치환됩니다. 에디터에서 { } 피커를 누르거나 / 를 입력해 토큰을 손쉽게 삽입할 수 있습니다. 예를 들어 검색 API 의 URL 에 ?q={Parameters.keyword} 를 넣으면 사용자가 입력한 검색어가 요청에 담깁니다.

JSON 본문 안에 중괄호로 된 객체가 있어도 괜찮습니다. Parameters. / Project. 로 시작하는 토큰만 치환되고, 일반 JSON 은 그대로 전송됩니다.