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

PRB·2022년 3월 1일
0

React

목록 보기
18/22
post-thumbnail

리스트 페이지에서 상세페이지 넘어가는 상황에서 상세페이지에서 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를 호출하면 된다.

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글