[ React ] Query String, Path parameter 을 이용한 네비게이션 바

먼저,

이것을 구현하게 된 계기는 프로젝트를 진행하며 Aside 부분,
즉, 메뉴를 누르면 url 변경되고 그 url 의 데이터를 받아오는 것을 구현.

잠시 정리,

Path parameter
원하는 조건의 데이터들 혹은 하나의 데이터에 대한 정보를 받아올 때 적절
(따로 정제되지 않은 데이터 가져올 때)

Query string
filtering, sorting, searching에 적절

---

const Aside = () => {
  const [categoryList, setCategoryList] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    fetch('http://백엔드IP, AWS')
      .then(res => res.json())
      .then(data => {
        setCategoryList(data.side_info);
      });
  }, []);

  const productList = typeId => {
    const queryString = `products/categories?type_id=${typeId}`;
    navigate(queryString);
  };

  return (
    <div className="aside">
      {categoryList?.map(category => {
        return (
      
                ... 
      
            <Link to={`/products/categories/${category.category_id}/types`} />
            <ul>
              {category.types?.map(types => {
                return (
                  <li
                    onClick={() => {
                      productList(types.type_id);
                    }}
                  >
                  </li>
        
                  ... 

항목에 따라 Path parameter, Query String 을 적용해야하는 부분 나눔,
그렇기 때문에 다소 ,,로직이 복잡해보인다.

1. Aside 연결

남성복, 여성복 같은 나열된 리스트를 거쳐가는 것이 아닌 단독적인 페이지에는 패스파라미터를 적용.

여러 항목이 리스트가 되어 단독적으로 보이지 않는 페이지에는 쿼리스트링을 적용.

• 백엔드와 통신을 통하여 받아온 데이터 값을 전달하여 각 항목별로 지정된 url 로 연결.

• 남성복 안에 리스트가 존재하는 데이터를 받기 때문에 하위로 리스트 key 값을 전달.

• 패스파라미터가 적용되는 곳은 link 로 연결, 쿼리스트링이 적용되는 곳은 navigate 를 사용하여 이동.

• Query String을 사용하여 ( 사이드 카테고리 ) 의 각 항목에 onClick이벤트를 적용.

• 눌리는 항목에 대한 id 값을 함수의 인자로 전달.

• url 에 백틱을 적용후에 템플릿 리터럴을 통하여 인자로 전달받은 값 입력.

• 변수에 할당하여 useNavigate 를 활용하여 url 전달.

---

2. 데이터 뽑아오기

2-1. Path parameter을 이용하여 각 항목에 따른 url 연결 구현

이때, fetch함수는 디폴트로 GET 방식으로 작동하고, 옵션 인자가 필요 없음

• 전달받은 url 을 통하여 url 에 맞는 데이터를 받아오며 페이지 구현.

• 패스파라미터는 useParams Hook 을 이용하여 원하는 값을 GET .

const Mens = () => {
  const [mensList, setMensList] = useState();
  const params = useParams();
  const navigate = useNavigate();

  
  
   const API_URL = `http://백엔드 IP, AWS/products/categories/${params.id}/types`;
  
  
  useEffect(() => {
    fetch(`${API_URL}`)
      .then(res => res.json())
      .then(res => {
        setMensList(res.message);
      });
  }, [params.id]);

   ...
   

---

2-2. QueryString을 이용하여 각 항목에 따른 url 연결 구현

• 전달받은 url 을 통하여 url 에 맞는 데이터를 받아오며 페이지 구현.

• 쿼리스트링은 useLocation Hook 으로 원하는 값을 필터링 하며 GET.

const List = () => {
  const [products, setProducts] = useState([]);
  const location = useLocation();

  const API_URL = `http://백엔드 IP, AWS/products/categories${location.search}`;

  useEffect(() => {
    fetch(`${API_URL}`)
      .then(res => res.json())
      .then(data => {
        setProducts(data.message);
    }
  }, [location.search]);
    
    ...

성장 포인트

path parameter 와 query string 를 직접 프로젝트에 적용하며 차이점을 명확하게 알게되었다.

---

마지막으로 ~!

< 개똥이는 오늘도 성장한다 ! >