React / useParams Hook으로 파라미터 받아 데이터 뿌려주기

상품리스트 페이지를 구현하려고 한다.

카테고리별로 뿌려주는 데이터가 다르기 때문에 URL의 파라미터를 받아 뿌려줘야 했다.

자바스크립트 경우 location.search 로 url값을 받아와 정규표현식으로 다듬어 사용해야해서 코드가 길어지고 정규표현식때문에 어려웠당. 

하지만 React는 react-router-dom의 useParams Hook으로 간편하게 값을 받아올 수 있었다.

 

1. 라우터 설정해주기 

// app.js

<Route element={<ItemListPage/>} path="/Itemlist/:category"/>

 

2. 링크에 파라미터 전달해주기

나는 헤더에서 제품을 누르면 인덱스로 전체보기를 하려고 all이라고 붙혀주었다.

//HeaderTop.jsx
<li><Link to="/Itemlist/all">제품</Link></li>

3.useParams로 값 받아오기

//SubItemList.jsx
// 라우트설정에 :category로 해줬으니 변수명도 같은걸로 설정해줘야 잘가져온다.
const { category } = useParams();

4. 리스트뿌려주기 삼항연산자로 전체보기와 카테고리들로 나눠보았고 타이틀도 파라미터에 맞게 바뀌도록 설정해 주었다.

    map함수 적용한 곳을 따로 빼주어 적용하면 가독성이 더 좋아질 것 같다. 

import React, { useEffect, useState } from 'react'
import axios from "axios";
import sub from '../../assets/css/sub/sub.module.css';
import { Link, useParams } from 'react-router-dom';

export default function SubItemList() {
  const [item, setItem] = useState([]);
  const { category } = useParams();

  console.log(category);
  useEffect(() => {
    const callApi = async () => {
    await axios.get("/api")
      .then((res) => {
        setItem(res.data.product)
    });
    };
    callApi();
  }, []);

  return (
    <>
        <div className={sub.list_page}>
            <div className={sub.inner}>
                <div className={sub.title}>
                    <p>{category}</p>
                </div>
                <div className={sub.list}>
                {category === "all"
                ? item.map((item) => (
                    <Link to={`/ItemDetail/${item.id}`} key={item.id} className={sub.item}>
                    <div className={sub.thumb}>
                      <img src={item.imageURL} alt="" />
                    </div>
                    <div className={sub.text}>
                        <p className={sub.desc}>{item.desc}</p>
                        <p className={sub.name}>{item.name}</p>
                        <div className={sub.price}>
                            <span className={sub.normal_price}>{item.price}원</span>
                            <span className={sub.sale_price}>{item.sale_price}원</span>
                        </div>
                    </div>
                  </Link>
                ))
                : item.filter(item => item.category === `${category}`).map((item) => (
                    <Link to={`/ItemDetail/${item.id}`} key={item.id} className={sub.item}>
                    <div className={sub.thumb}>
                      <img src={item.imageURL} alt="" />
                    </div>
                    <div className={sub.text}>
                        <p className={sub.desc}>{item.desc}</p>
                        <p className={sub.name}>{item.name}</p>
                        <div className={sub.price}>
                            <span className={sub.normal_price}>{item.price}원</span>
                            <span className={sub.sale_price}>{item.sale_price}원</span>
                        </div>
                    </div>
                  </Link>
                ))
                }
                </div>
            </div>
        </div>
    </>
  )
}

5. 가독성을 위해 리펙토링 해보았다.

// map()함수를 쓴 부분을 따로 빼내어 리팩토링 해보았다.

import React from 'react'
import sub from '../../assets/css/sub/sub.module.css';
import { useParams } from 'react-router-dom';
import AllItem from '../product/AllItem';
import CategoryItem from '../product/CategoryItem';


export default function SubItemList() {
  const { category } = useParams();
  
  return (
    <>
        <div className={sub.list_page}>
            <div className={sub.inner}>
                <div className={sub.title}>
                    <p>{category}</p>
                </div>
                <div className={sub.list}>
                {category === "all"
                ?<AllItem />
                :<CategoryItem/>
                }
                </div>
            </div>
        </div>
        
     
    </>
  )
}

useParams는 편리하다.