[23Ideal/React] 게시판 만들기 (3) - 게시물 상세 조회하기 (fetch, get API)

앞 게시물에서 서버로부터 게시판 목록을 조회하는 것까지 완료하였다
이제 게시판 목록에서 게시물을 눌렀을 때 해당 내용을 볼 수 있는 게시물 상세 조회 페이지를 만들어보자

---

우선 상세내용 페이지로 이동하였을 때
PostRead.js 라는 파일을 새로 만들어 게시판 목록에서 제목을 눌렀을 때 해당 페이지로 이동하게끔 react-router 를 사용하였다 

PostList.js

return (
	<tr}>
    	<td> {i + 1} </td>
    	<Link to="/PostList" state={{ data: post.boardId , boardType: boardType, scrap: post.scrapCount }} className="postTitle" >
        	<td> {post.title}</td>
    	</Link>
    	<td>{post.createdDate.substring(0, 10)}</td>
    	<td>{post.userName}</td>
    	<td>{post.scrapCount}</td>
    </tr>
)

게시물 상세 조회 페이지로 이동하려면 제목을 클릭한 해당 게시물의 boardId 와 boardType 을 알아야하므로 props 를 통해 PostRead.js 로 넘겨주었다

---

백엔드에서 설정한 '상세 내용 조회 api' 경로가 "게시판 경로 + boardId" 이다.
앞에 PostList.js 에서 props 로 넘겨받은 boardId 를 useLocation 으로 받고, 경로를 선언해준다

PostRead.js

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

const PostRead = (props) => {
  const location = useLocation();
  const id = location.state.data;
  const boardType=location.state.boardType;
  const scrapCount=location.state.scrap; //스크랩수
  
  const path = "/api/v1/boards/" + id;
 
 ... }

위에서 선언해준 path 로 이제 앞에서 게시판 목록 조회를 했던 것 처럼
fetch / GET 을 이용해 api 를 가져온다

const [content, setContent] = useState([]); //불러온 내용을 담을 content

fetch(path, {
    headers: {
      Authorization: `Bearer ${GoogleToken}`, //토큰 입력
    },
  })
    .then((res) => res.json())
    .then((response) => {
      setContent(response.data);
    });

그러면 이제 서버에서 해당 boardId 게시물의 상세 내용이 content 에 담길 것이고
그 중에서 필요한 정보만 렌더링 해주면 된다.

나는 제목, 작성자, 작성일, 스크랩수 를 상세 내용에 렌더링할 것이므로 서버에 있는 정보 중 이들만 사용하면 된다

반복문 map 을 사용하여 렌더링해주었고, 제목/작성일/작성자/스크랩수는 테이블을 이용하여 게시판 레이아웃을 만들었다

return (
    <div>
    	//게시물 보기 타이틀
      <div>
        <h1>게시글 보기</h1>
        <hr/>
      </div>
      
      	// 제목,작성일,작성자,스크랩수 
      <div>
        <table>
          <tr>
            <td>제목</td>
            <td>{content.title}</td>
          </tr>
          <tr>
            <td>작성자</td>
            <td colSpan="3">관리자</td>
          </tr>
          <tr>
            <td>작성일</td>
            <td>{date}</td>
            <td>스크랩수</td>
            <td>{scrapCount}</td>
          </tr>
        </table></div>
       
       	//게시물 내용
        <div className="content">  
        { content.content != undefined ?
          content.content.split('\n').map( line => {
            return (<span>{line}<br/></span>)
          }) :null
        }
        
        { content.imageKeys != undefined ?
         <img src={'s3 경로'+content.imageKeys[0]} /> 
        : null}  </div> 
        <hr/>
        </div>

    </div>
  );
};

 

---

* 전달받은 데이터 (렌더링할 내용) 줄바꿈 처리하기

https://12yeonii.tistory.com/86