게시글 클릭시 상세페이지 이동(useParams)

이전에 각 post마다 고유 num값들을 넣었습니다.

list 페이지에서 콘솔을 찍어보면.. 각 게시글마다 postNum이 count 되어 1씩 증가된 것을 볼 수 있습니다.

 

 

Link태그를 추가한 뒤에

 

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

 

 

 

postList(서버에서 res받은 data)를 map으로 뿌려주면 끝!!

 

    {postList.map((list, i) => {

        return (

          <div key={i} className="post">

            <Link to={`/post/${list.postNum}`}>

              <p className="title">제목 : {list.title}</p>

              <p className="content">내용 : {list.content}</p>

            </Link>

          </div>

        );

      })}

 

 

 

각각의 게시글마다 고유의 num으로 상세페이지 이동..

3번 게시글 url

 

1번 게시글 url

 

라우팅 규칙을 다시 추가해 줍니다.

 

  <Route path="/post/:postNum" element={<Detail />} />

 

 

 

한가지 고민사항은 게시글마다 클릭시 각각의 고유 url로 이동은 하지만 같은 정보를 화면에 출력합니다..   

react 공식문서로 가서 찾아보니 useParams로 추적이 가능하다고 합니다.

 

 

client단 코드 - useParams작업

 

  import React from "react";

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

  export const Detail = () => {

    const params = useParams();

    console.log(params);

    return <div>Detail페이지</div>;

 

 

 

 

params를 콘솔로 찍어보니 Detail 페이지의 고유num이 추적되는 것을 확인할 수 있습니다.

 

 

client 코드

params를 body에 넣어서 server에 요청 작업을 진행 합니다.

 

  export const Detail = () => {

    const params = useParams();

    useEffect(() => {

      let body = {

        postNum: params.postNum,

      };

      axios

        .post("/api/post/detail", body)

        .then((res) => {

          console.log(res);

        })

        .catch((err) => {

          console.log(err);

        });

    }, []);

    return <div>Detail페이지</div>;

  };

 

 

 

 

server 코드 

client에서 요청한 데이터를 콘솔로 찍어보면

 

  app.post("/api/post/detail", (req, res) => {

    console.log(req.body.postNum);

  });

 

 

 

3이 출력 되는 것을 볼수 있습니다.

 

 

client에서 body에 넣어 보내준 값으로 findOne(조건)을 걸어서 코드 작성 후 doc를 콘솔로 확인해 봅니다.

 

  app.post("/api/post/detail", (req, res) => {

    Post.findOne({ postNum: req.body.postNum })

      .exec()

      .then((doc) => {

        //server에서 요청한 현재 detail페이지에 대한 postNum정보  콘솔로 확인

        console.log(doc);

        res.status(200).json({ success: true, post: doc });

      })

      .catch(() => {

        res.status(400).json({ success: false, text: "DB불러오기 실패" });

      });

  });

 

 

 

 

 

3번 게시글의 title과 content가 확인 되네요.. 😀

 

 

 

 

client단에서도 보면 요청 페이지에 대한 정보를 받은 것을 확인!!!

 

 

 

그럼 이제 list에 있는 게시글들을 클릭하면 useParams로 추적해서 페이지 고유 num을

서버에 보내고 서버에서는 client에서 요청온 고유num(postNum)에 맞는 data를 찾아서 

detail페이지에 보내주게 되겠네요..

 

server에서 받은 data를 detail 페이지에 뿌려주기만 하면 끝!!