[typescript] 타입스크립트에서 REST API 호출 시 모델 변환 방법

12 Dec 2023

typescript

타입스크립트를 사용하여 REST API를 호출할 때 서버에서 받은 데이터를 효율적으로 모델로 변환하는 방법에 대해 알아보겠습니다.

1. Axios를 사용하여 API 호출하기

우선, Axios를 사용하여 REST API를 호출합니다. 아래는 Axios를 사용하여 GET 요청을 보내는 간단한 예제입니다.

import axios from 'axios';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

axios.get<Post>('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    const postData: Post = response.data;
    // 이후 모델로 변환하는 작업 수행
  })
  .catch(error => {
    console.error(error);
  });

2. 서버 응답 데이터를 모델로 변환하기

Axios로 서버에서 받은 응답 데이터는 기본적으로 any 타입으로 설정되므로, 받은 데이터를 명시적인 모델로 변환해야 합니다. 이때, 타입 단언(type assertion)을 사용하여 데이터를 명시적인 모델로 지정할 수 있습니다.

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    const postData = response.data as Post;
    // postData를 사용하여 원하는 작업을 수행
  })
  .catch(error => {
    console.error(error);
  });

3. DTO(Data Transfer Object)를 활용한 변환

API 응답 데이터를 모델로 변환할 때, DTO(Data Transfer Object)를 활용하여 변환하는 것이 좋습니다. DTO를 사용하면 API 응답 데이터를 받아올 때 자동으로 모델로 변환할 수 있고, 코드의 가독성과 유지보수성이 향상됩니다.

interface PostDTO {
  userId: number;
  id: number;
  title: string;
  body: string;
}

class Post {
  constructor(private postData: PostDTO) {}

  get userId() {
    return this.postData.userId;
  }

  get id() {
    return this.postData.id;
  }

  get title() {
    return this.postData.title;
  }

  get body() {
    return this.postData.body;
  }
}

axios.get<PostDTO>('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    const postData: PostDTO = response.data;
    const post = new Post(postData);
    // post를 사용하여 원하는 작업을 수행
  })
  .catch(error => {
    console.error(error);
  });

요약

타입스크립트에서 REST API를 호출하고, 받은 데이터를 효율적으로 모델로 변환하기 위해 Axios를 사용하여 API를 호출한 후, 받은 데이터를 명시적인 모델로 변환하거나 DTO를 활용하여 변환하는 방법에 대해 알아보았습니다.

이러한 방법들을 적절히 활용하여 타입스크립트 프로젝트에서 API 응답 데이터를 처리하고 모델로 변환하는 작업을 보다 효율적으로 수행할 수 있습니다.

참고 문헌: Axios 공식 문서, 타입스크립트 핸드북