useParams

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

<Route path="/sky/:sky" element={<Sky />} /> // 콜론(:)이 중요. params

만약 주소에 :2가 들어간다면.

const sky = useParams();
//sky에 {sky:'2'} object가 담긴다.

const {sky} = useParams();
//sky에 2 string이 담긴다.

 const Restaurant = () => {
  const [dummyData, setDummyData] = useState([]);

  axios
    .get("http://localhost:4000/rest", {
      withCredentials: false,
    })
    .then((res) => setDummyData([].concat(res.data.data)))
    .catch((ewr) => console.log("ewr")); // 서버에 요청해서 사진 받기.

  return (
    <>
      <Div>
        <Search />
      </Div>
      <RestaurantMainContainer>
        {dummyData.map((el) => (
          <Restaurantlist key={el.id} el={el} /> // 서버에서 받아서 넘겨주기
        ))}
      </RestaurantMainContainer>
    </>

Restaurantlist component

<ImgAndName>
      <input type="checkbox" onChange={handleCheckBox} />
      <Link to={`/restaurant/info/${props.el.id}`}> // 받은 것들에 하나씩 주소를 넣어 누르면 여기로 연결이 되게 만듬. 이때 뒤에 오는 것이 params가 됨
        <Button>
          <RestaurantMainImg
            src={props.el.picture} 
            classname="RestaurangtImg"
          />
          <br />
          {props.el.name}
        </Button>
      </Link>
    </ImgAndName>

RestaurantInfo

 const RestaurantInfo = ({dummyData}) => {
 const params = useParams();
 // console.log(params);
 // console.log(dummyData[params.id - 1].picture);

 return (
   <Restaurantinfopage>
     <RestaurantinfoContainer>
       <Infoname>{dummyData[params.id - 1].name}</Infoname>  //넘겨받은 dummydata로 레스토랑 리스트에서 누르면 인포 페이지가 뜨도록 설정. 여기서 params 이용. 
       <Infoimg src={dummyData[params.id - 1].picture} />
       <Infoaddress>주소: {dummyData[params.id - 1].address}</Infoaddress>
       <Infodetail>식당상세: {dummyData[params.id - 1].detailInfo}</Infodetail>
       <Infonum>전화번호: {dummyData[params.id - 1].number}</Infonum>
       <Infotime>영업시간: {dummyData[params.id - 1].officeHours}</Infotime>
     </RestaurantinfoContainer>
     <div>
       <Mapimg src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fd%2Fthumbnail%3Fmid%3D1hD2yQqdR1jJa5HoVNVS1TS8A95M%26hl%3Dko&type=sc960_832" />
       <Location>식당 위치</Location>
     </div>
   </Restaurantinfopage>

App에서 함수로 get요청을 만들어서 함수로 설정.
함수를 nevbar에 전달.
레스토랑을 클릭하면 함수를 실행시켜 get요청 실행.
setDummyData state에 넣어 dummyData를 변경하고 프롭스로 info로 전달.
그 후 dummyData에서 params.id, 즉 주소 :id 부분이었던 /1, /2 등 이 부분을 따와서 dummyData와 비교하여 사진 입력