react router dom을 이용한 url 직접 접근

다음 글은 데이터베이스가 json일 경우를 가정하고 작성.
다른경우라도 크게 다르지 않을듯.

겪은 문제

localhost:99999/category/computer/0001

이런 url이 있다고 쳐보자.
[카테고리] -> [컴퓨터 상품 리스트] 에서 정보를 받아와 상품 상세 페이지로 진입한다.
이 경우 Link를 타고 와야 파라미터가 전달되는데,
상품 id(0001)를 직접 입력해서 상세페이지로 접근하면 전달받은 정보가 없어서 텅 빈 페이지가 나온다.

해결

우리에겐 리액트라우터가 제공하는 useParams가 있다.
router 관리는 대충 이런식으로 하고있을건데

<Route path="/Category/:id/:item" element={<Detail />} />

id와 item은 useParams에 저장되어있다.

여기서 id는 카테고리 번호, item은 상품의 고유번호다.

import { useParams } from "react-router-dom";

const {id, item} = useParams();

일단 갖고와준다.

그리고 우린 해당 id와 item이 일치하는 데이터를 가져와야한다.

배열에서 원하는 데이터를 찾아주는 Array.find()를 이용하자.

import data from "data.json";

const isItem = (element) => {  //element는 해당 배열에 들어있는 친구들이다
	if(element.id === item) {  //해당 배열의 친구가 갖고 있는 id와 현재 페이지의 item(상품고유번호)값이 일치하면
    	return true;  //갖고올거임
    }
};

const goods = data[id].find(isItem); //data에서 id(카테고리)와 일치하는 키값을 가진 배열에서 isItem으로 찾은걸 갖고와!
//※여기서 data[id]의 id는 인덱스번호가 아니다. json의 키값임.

그리고 goods로 렌더링 하면 된다.

return (
        <>
            <div>{goods.name}</div>
            <div>{goods.price}</div>
        </>
    );

참고로 json의 구조는 이렇게 해놨다.

{
    "1" : [
        {
            "id":"0001",
            "name":"4성구",
            "price":"33900"
        },
        {
            "id":"0006",
            "name":"악력기",
            "price":"11000"
        }
    ],
    "2" : [
        {
            "id":"0002",
            "name":"사이아인 전투복",
            "price":"94000"
        }
    ],
    "3" : [
        {
            "id":"0003",
            "name":"도라에몽",
            "price":"1300억"
        }
    ],
    "4" : [
        {
            "id":"0004",
            "name":"거북알",
            "price":"13200"
        }
    ],
    "5" : [
        {
            "id":"0005",
            "name":"피콜로 더듬이",
            "price":"13200"
        }
    ]
}