id값으로 매장별 리뷰등록하기

Kimmy·2025년 3월 18일

PWA_PROJECT

목록 보기

5/47

리뷰등록, 삭제까지 구현하였는데, 큰 실수가 있었다.
바로 업체를 admin페이지에서 딱 하나만 만든체 테스트했었던 것이다 ㅠㅠ

등록도 되고 삭제도 되는거 확인하고 신나서 아 리뷰갯수도 표시하는중이었는데, 그때 이상함을 느꼈다. 그제서야 모든 매장의 리뷰내용과 갯수가 동일하다는 문제를 발견했다.

문제 인식

params에 분명 shop.id가 있기때문에, 각 리뷰 object에도 리뷰id 외에 각 매장별id가 있어야하는데, 로그를 찍어봐도 리뷰에 shop.id가 나오지않고 어느 매장의 리뷰탭을 들어가봐도 모든 리뷰가 다 보였다.
나이키에 리뷰를 달았는데, 아이다스와 뉴발란스에서도 나이키 리뷰가 보이는상태.
아무래도 업체의 식별값id를 잘못부르고 있는거같기때문에 이 문제제점으로 접근해보았다.

리팩토링 전

const params = useParams();
const shopId = params.shopId; // URL 파라미터에서 id 값을 가져옴
const shops = JSON.parse(localStorage.getItem("shops") || "[]");
const shop = shops.find((s) => s.id === Number(shopId));

const [reviews, setReviews] = useState([]); // 리뷰 목록을 저장하기 위한 배열
const [newReview, setNewReview] = useState("");

useEffect(() => {
  if (shopId) {
    const shopReviews = getReviewsByShopId(shopId);
    setReviews(shopReviews);
  }
}, [shopId]);

리팩토링 후

const params = useParams();
const shopId = params?.id; // URL 파라미터에서 id 값을 가져옴
const [reviews, setReviews] = useState([]); // 리뷰 목록을 저장하기 위한 배열
const [newReview, setNewReview] = useState("");
const [shop, setShop] = useState(null);

useEffect(() => {
  if (typeof window !== "undefined" && shopId) {
    const shops = JSON.parse(localStorage.getItem("shops") || "[]");
    const foundShop = shops.find((s) => s.id === Number(shopId));
    if (foundShop) {
      setShop(foundShop);
    }
    const shopReviews = getReviewsByShopId(shopId);
    setReviews(shopReviews);
  }
}, [shopId]);

1. param 값 받아서 shopId출력하기

❌ shopId = params.shopId;

params.shopId는 URL 파라미터에서 shopId 값을 가져오는 코드이다. 그러나 URL 파라미터의 키가 id인 경우, params.shopId는 undefined를 반환한다.

export default function ReviewsPage() {
  const params = useParams();
  const shopId = params.shopId; // 에러남 xxx
  console.log(params);
  console.log(`업체아이디 :` + shopId);

⭕ shopId = params?.id;

params?.id는 URL 파라미터에서 id 값을 가져오는 코드이다. URL 파라미터의 키가 id인 경우, 올바르게 id 값을 가져올 수 있다.

shop.id와 shopId는 서로 다른 컨텍스트에서 사용되는 값이다. shop.id는 매장 객체의 식별자이고, shopId는 URL 파라미터에서 가져온 매장 식별자이다. 이 두 값이 일치해야 매장별로 리뷰를 올바르게 필터링할 수 있다.

shop.id는 매장 객체의 식별자이다.
매장 객체는 로컬 스토리지에 저장되며, 각 매장은 고유한 id를 가진다.
예를 들어, shops 배열의 각 요소는 매장 객체이며, 각 매장 객체는 id 속성을 가진다.

export default function ReviewsPage() {
  const params = useParams();
  const shopId = params?.id; // URL 파라미터에서 id 값을 가져옴
  console.log(params);
  console.log(`업체아이디 :` + shopId);

비교) shopId = params;

object로 출력됨. 이는 값이 아니라서 매장id값 출력이 안된다.

export default function ReviewsPage() {
  const params = useParams();
  const shopId = params; // URL 파라미터에서 id 값을 못 가져옴
  console.log(params);
  console.log(`업체아이디 :` + shopId);