[React] 익명게시판 글의 상세 데이터 패칭하기

상세 페이지의 API는 다음과 같다.

https://reactapitest.pythonanywhere.com/api/posts/

post 번호를 받아 그에 대한 상세 내용을 보여 주는 것.
응답은 다음과 같다.

{
    "id": 23,
    "title": "찬성을 얻은 때",
    "contents": "모든 국민은 종교의 자유를 가진다. 헌법개정안이 제2항의 찬성을 얻은 때에는 헌법개정은 확정되며, 대통령은 즉시 이를 공포하여야 한다. 대통령은 조약을 체결·비준하고, 외교사절을 신임·접수 또는 파견하며, 선전포고와 강화를 한다.한다..",
    "repls": []
}

이러한 글의 상세 내용을 서버로부터 받아와서 보이게 만들어보자.
먼저, App,jsx파일로 이동하여, API의 내용을 Showpost.jsx의 컴포넌트도 이용할 수 있도록 props값으로 넘겨 주어야 한다.

<Routes>
	<Route path = "/" element = {<ShowPostList apiUrl = {API_URL}></ShowPostList>}></Route>
	<Route path = "/write" element = {<WritePost></WritePost>}></Route>
	<Route path = "/post/:postID" element = {<ShowPost apiUrl={API_URL}></ShowPost>}></Route>
</Routes>

postID를 넘겨주고, 그에 해당하는 내용을 보여주도록 한다.
일단 API를 넘겼으니, Showpost.jsx에 가서 이 값을 props로 넘겨준다.

...
const ShowPost = ({apiUrl}) => {
  const [post, setPost] = useState(null);
  const [repls, setRepls] = useState([]);
  const [postLoading, setPostLoading] = useState(true);
  const [replLoading, setReplLoading] = useState(true);
  const replInput = useRef();
  const Params = useParams();
 ...

짜잔! 이렇게 넘겨준 것이다. 이전에 댓글과 게시글을 임의로 로딩하기 위하여, useEffect를 이용하였는데 이를 다시 만들어보자.

useEffect(()=> {
   axios.get(`${apiUrl}posts/${Params.postID}`)
   .then(response => {
     setPost(response.data)
     setPostLoading(false);
     setRepls(response.data.repls);
     setReplLoading(false);
     replInput.current.focus();
   })
 }, []);

이렇게 useEffect함수를 다시 만들었다. 이번에는 axios를 이용하여, postID를 받아와 api상에서 보여줄 수 있도록 한 것이다. 받아오는 데이터를 setPost, setRepls를 이용하여 패칭하여 보여줄 수 있도록 만든다. 이 때 axios를 이용하기 때문에 이것을 import하는 것을 잊지 말도록!

이 작업을 마치면

서버에 있는 글이 드러나게 된다.