React, MySQL 풀스택 5일차 (useParams로 포스터 내용 보여주기)

PedroTech님의 풀스택 강의 5일 차를 참고하였습니다.

 

📌 포스터 내용 보여줄 Router 생성하기

// ./client/src/App.js
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div className="nav">
          <Link to="/" className="link">
            Home Page
          </Link>
          <Link to="/createpost" className="link">
            Create A Post
          </Link>
        </div>

        <Routes>
          <Route path="/" exact element={<Home />} />
          <Route path="/createpost" exact element={<CreatePost />} />
          // 포스터 내용 보여줄 Router 생성해줍니다.
          <Route path="/post/:id" exact element={<Post />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Route의 URL은 웹에서 사용하는 URL이라서 DB 경로와 관련되어있지 않습니다.

useParams()를 사용할 것이기 때문에 path="/경로/:매개변수명"을 써줘야 합니다.

 

 

 

 📌 Post.js 코드 작성하기(포스터 내용 부분 코드 작성)

// ./client/src/pages/Post.js
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

function Post() {
  let { id } = useParams();
  const [postObject, setPostObject] = useState({});

  useEffect(() => {
    axios.get(`http://localhost:3001/posts/byId/${id}`).then((response) => {
      setPostObject(response.data);
    });
  }, []);

  return (
    <div className="postPage">
      <div className="leftSide">
        <div className="posts" id="individual">
          <div className="title">{postObject.title}</div>
          <div className="body">{postObject.postText}</div>
          <div className="footer">{postObject.username}</div>
        </div>
      </div>
      <div className="rightSide">Comment Section</div>
    </div>
  );
}

export default Post;

useParams()는 Route path와 일치하는 동적 매개변수의 키/값 쌍의 개체를 반환합니다.
(동적 매개변수는 경로에서 :(콜론) 뒤에 있는 매개변수를 의미합니다.)

 

 

 

📌 포스터 내용을 가져다줄 GET 코드 작성하기

// ./server/routes/Post.js
router.get("/byId/:id", async (req, res) => {
  const id = req.params.id;
  
  const post = await Posts.findByPk(id);
  res.json(post);
});

📍코드 해석
1. req.params.id: "/byID/:id"에서 :id를 가져오는 역할을 하는 코드입니다.

2. findByPK(매개변수명): DB에서 매개변수명과 동일한 Primary Key를 가지고 있는 레이블을 반환해 주는 코드입니다.

3. res.json(post): 결과를 JSON 형태로 변환해서 반환하는 코드입니다.

 

 

 

📌 결과

포스터 누르기 전 화면입니다.

 

포스터를 누른 후 화면입니다.

포스터를 누른 후에는 URL 마지막 부분에 id값이 보이게 됩니다.
이렇게 성공적으로 각 포스터마다 내용을 보여줄 수 있게 되었습니다.

 

 

 

📌 느낀 점

useParams()는 쇼핑몰 프로젝트 때 사용해봤는데 덕분에 useParams에 대한 정확한 역할에 대해 정리했습니다.

findByPK같이 React에 DB에서 Primary Key를 가져오는 메서드가 있다는 걸 알게 된 순간이었습니다.