TIL-62 React 하나의 페이지에서 2개의 API 사용하기

리스트 페이지에서 상세페이지 넘어가는 상황에서 상세페이지에서 2개의 API를 관리해야 하는 일이 생겼다. 다니는 회사가 구독형 서비스인데 이번에 단품이 추가되면서 상세페이지에서 구독형 상품 API, 단품 API를 다르게 호출해야 하는 상황이었다.

우선 리스트페이지에서 onClick이다.

// 단품 onClick 
const onClick = () => {
    history.push(`/mypages/order-history/${order.id}?type=s`);
  };

// 구독형 상품 onClick 
const onClick = () => {
    history.push(`/mypages/order-history/${order.id}`);
  };

// 상세페이지
  useEffect(() => {
    const parsed = queryString.parse(location.search); // {type: 's'} 
    if (typeof parsed?.type === 'string' && parsed.type === 's') {
      setType(singleOrder);
    } else {
      setType(order);
    }
  }, []);

자바스크립트 내장 함수인 location.search를 이용하여 URL 물음표 뒤에 있는 파라미터들을 가져올 수 있다. 그 파라미터로 type을 업데이트를 하고 type을 가지고 각각의 일치하는 API를 호출하면 된다.