[Node + React] url 파라미터

우선 routes.js를 확인

이후 Router.js도 한 번 확인

잘 되어있다면 id 파라미터를 받아 get 요청을 해주는 API를
server.js에 작성해준다.

app.get("/feedback/:id", (req, res) => {
  const feedId = req.params.id;
  const q = "SELECT * FROM diettb WHERE diet_no = ?"; // diet_no가 id와 일치하는 데이터 조회
  db.query(q, [feedId], (err, data) => {
    if (err) return res.status(500).json(err); // 오류가 발생하면 500 상태 코드 반환
    if (data.length === 0) return res.status(404).json("Data not found"); // 데이터가 없으면 404 반환
    return res.json(data[0]); // 데이터가 있으면 첫 번째 결과 반환
  });
});

list에 나오는 title을 클릭했을 때,
react-router-dom의 Link를 사용해 아래처럼 처리

이후, feedback.js로 가서 아래처럼 작성

import axios from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Loading } from "../../components/Loading";

export const Feedback = () => {
  const { id } = useParams(); // URL 파라미터로부터 id 값 추출
  const [itemData, setItemData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchItemData = async () => {
      try {
        const res = await axios.get(`http://localhost:8800/feedback/${id}`);
        setItemData(res.data);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchItemData();
  }, [id]);

  if (loading) {
    return <Loading />;
  }

  if (!itemData) {
    return <div>알맞은 데이터 정보가 없습니다. 다시 시도해주세요.</div>;
  }

  return (
    <div>
      <div>
        <h1>{itemData.food_name}</h1>
        <p>{itemData.reg_date}</p>
      </div>
    </div>
  );
};