[typescript] REST API 호출 시 응답 공유 방법

12 Dec 2023

typescript

웹 애플리케이션을 개발할 때, RESTful API를 사용하여 서버로부터 데이터를 가져와야 하는 상황이 자주 발생합니다. 이러한 경우, 서버로부터 받은 응답을 여러 곳에서 공유하고 활용해야 하는데, 이를 위해 여러 가지 방법을 사용할 수 있습니다. 이 글에서는 TypeScript로 작성된 웹 애플리케이션에서 REST API 호출 시 응답을 공유하는 방법에 대해 살펴보겠습니다.

의존성 주입

의존성 주입은 한 요소가 다른 요소에 의존하는 것을 허용하는 디자인 패턴입니다. 의존성 주입을 사용하여 API 호출을 처리한 후, 해당 응답을 서비스나 컴포넌트에 주입하도록 설계할 수 있습니다. 이를 통해 여러 곳에서 쉽게 해당 응답을 공유하고 재사용할 수 있습니다.

class APIService {
  async fetchData(): Promise<Data> {
    // REST API 호출 및 응답 데이터 반환
  }
}

class DataComponent {
  constructor(private apiService: APIService) {}

  async loadData() {
    const data = await this.apiService.fetchData();
    // 데이터 활용
  }
}

이벤트

이벤트를 활용하여 응답을 다른 부분에 전달하는 방법도 있습니다. 응답을 이벤트로 발생시킨 후, 해당 이벤트를 리스닝하여 응답을 받아서 처리할 수 있습니다.

class APIResponseEvent extends Event {
  constructor(public responseData: Data) {
    super('apiResponse');
  }
}

class APIService {
  async fetchData() {
    const data = await fetch('https://api.example.com/data');
    const responseData = await data.json();
    document.dispatchEvent(new APIResponseEvent(responseData));
  }
}

document.addEventListener('apiResponse', (event: APIResponseEvent) => {
  const responseData = event.responseData;
  // 데이터 활용
});

상태 관리 라이브러리

상태 관리 라이브러리를 사용하여 전역 상태를 관리하는 것도 유용한 방법입니다. 대표적인 상태 관리 라이브러리로는 Redux나 MobX가 있습니다. API 호출로부터 받은 응답 데이터를 상태로 저장하고, 필요한 곳에서 해당 상태를 사용하여 데이터를 공유할 수 있습니다.

// Redux Example
import { createStore } from 'redux';

// API fetch action
const fetchDataAction = () => {
  return async (dispatch) => {
    const data = await fetch('https://api.example.com/data');
    const responseData = await data.json();
    dispatch({ type: 'FETCH_DATA', payload: responseData });
  };
};

// Reducer to store response data
const dataReducer = (state = null, action) => {
  if (action.type === 'FETCH_DATA') {
    return action.payload;
  }
  return state;
};

const store = createStore(dataReducer);

// Access the response data from any component
const responseData = store.getState();

이렇게 API 호출 시 응답을 공유하는 방법을 적절히 선택하여 웹 애플리케이션을 개발하면, 유지보수가 쉽고 확장 가능한 코드를 작성할 수 있습니다. 각 방법마다 장단점이 있으니 프로젝트의 요구 사항에 맞게 선택하시면 됩니다.

참고 자료

TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
Redux 공식 문서: https://redux.js.org/introduction/getting-started
MobX 공식 문서: https://mobx.js.org/README.html

목차

의존성 주입

이벤트

상태 관리 라이브러리

참고 자료