RESTful API : path parameter, query parameter

RESTful API란 무엇일까?

api시스템을 구현하기 위한 아키텍쳐 중에 가장 널리 사용되는 형식으로

Representation State Transfer의 줄임말이다.

말 그대로 해석해보면 대표하고, 드러내고, 나타내는 느낌으로

딱 보자마자 무슨 말인지 알 수 있어야한다는 뜻이다.

 

다시 정리해보자면

웹상에서 사용되는 여러 리소스를 HTTP URL로 표현하고 그 리소스에 대한 행위를 HTTP Method로 정의하는 방식인데 

RESTful API는 URL을  딱 보자마자 무엇을 의미하고 목적이 무엇인지 알 수 있다.

 

종류는 두가지

1. path parameter

상세페이지에 사용

2. query parameter

필터링, 오더링, 페이지네이션, 써치

상품리스트페이지에 사용 

 

프로젝트를 하면서 사용해본 후기

나는 프로젝트를 하면서 상세페이지를 맡았다.

처음에는 query parameter로 구현했다가

백엔드에서 path parameter로 바꿔줄 수 있냐고해서

운좋게? 둘 다 경험해봤다.

 

query parameter 코드

import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import Detail from './Detail/Detail';

const ProductDetail = () => {
  const [prdDetailData, setPrdDetailData] = useState([]);
  const location = useLocation();
   
   useEffect(() => {
   fetch(`http://10.58.4.28:8000/products/detail${location.search}`)
      .then(res => res.json())
      .then(data => {
        // console.log(data);
        setPrdDetailData(data.result);
      });
  	}, []);
    
    return prdDetailData.map(prdDetailData => {
    return (
      <Detail key={prdDetailData.issue_number} prdDetailData={prdDetailData} />
    );
  });
};

export default ProductDetail;

 

path parameter 코드

path parameter는 router.js도 셋팅해줘야한다.

<Route path="/Products/1/:product_id" element={<ProductDetail />} />

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import Detail from './Detail/Detail';

const ProductDetail = () => {
  const [prdDetailData, setPrdDetailData] = useState([]);

  let { product_id } = useParams();

  useEffect(() => {
    fetch(`http://10.58.0.77:8000/products/1/${product_id}`)
      .then(res => res.json())
      .then(data => {
        setPrdDetailData([data.RESULTS]);
      });
  }, []);

  return prdDetailData.map(prdDetailData => {
    return (
      <Detail key={prdDetailData.issue_number} prdDetailData={prdDetailData} />
    );
  });
};
export default ProductDetail;