[23Ideal/React] 게시판 만들기 (2) - 게시물 목록 조회하기 (fetch, get API)

앞에서 만든 게시판 테이블에 게시물 목록을 넣어줄 것이다.
앞 게시물은 게시물 제목, 작성자, 작성일을 직접 입력하였지만

이번에는 백엔드와 연결하여 게시판 목록 api 를 불러와 게시판 목록을 조회해보자

fetch 를 사용하였고, fetch method 중 "GET" 을 사용하면 API를 불러올 수 있다

 const [postData,setPostData]=useState([]);

  useEffect(()=>{
    fetch("url 경로", {
    // method:"GET",
      headers: {
        Authorization: `Bearer ${access_token}`,
      },
    })
      .then((res) => res.json())
      .then((response) => {
        setPostData(response.data);
      });
  },[]);

fetch method는 GET 외에도 POST, DELETE, PUT 등이 있다
하지만 디폴트는 get 이기 때문에 주석처리한 method:"GET" 을 꼭 써주지 않아도 method 가 GET 으로 작동한다

백엔드에서 검증된 토큰이 있어야 게시물을 조회할 수 있게끔 설정해놓았기 때문에
access_token 을 헤더에 담아 정보를 불러올 해당 백엔드 경로에 보내준다

정상적으로 API 를 불러오면, postData 에 불러온 data 값이 담길 것이다

return (
    <>
      <table className="common-table">
        <thead>
          <tr>
            {headersName.map((item, index) => {
              return (
                <td className="common-table-header-column" key={index}>
                  {item}
                </td>
              );
            })}
          </tr>
        </thead>
        <tbody >
          { postData.data.map((post, i) => {
            return (
              <tr>
                <td>{i + 1}</td>
                <Link to="/NoticeRead">
                  <td> {post.title}</td>
                </Link>
                <td>{post.createdDate.substring(0, 10)}</td>
                <td>{post.userName}</td>
              </tr>
            );
          })
        }
       </tbody>
     </table>
    </>
  );

그리고 앞 게시물에서 만들어던 게시판 테이블에 map 을 이용하여 postData 를 반복 렌더링 해주면 된다.

* 백엔드에서 api를 불러오면 createdDate 가 "2022-07-18T11:11:11" 이런 형태로 넘어오기 때문에 substring을 이용하여  2022-07-18 만 나타나게 하였다

---

헤맸던 점 & 해결 방법

postData 의 초기값이 [ ] 이기 때문에 map을 사용하여 렌더링할때 초기값이 null 이라 렌더링되지 않았다
api를 먼저 불러오고, postData의 값이 초기값에서 response.data 값으로 바뀐 후에야 렌더링이 되는 것이다

이 문제를 어떻게 해결할까 하다가 
postData 가 초기값이 아닐때 return 이 되게끔 (렌더링이 되게끔) JSX에 삼항연산자를 써주었다 (조건문)

length를 이용하였고 postData 가 초기값일때는 postData.length 가 0 이므로, 0이 아닐때 렌더링이 되게끔 해주면 된다

return (
    <>
      <table className="common-table">
        <thead>
          <tr>
            {headersName.map((item, index) => {
              return (
                <td className="common-table-header-column" key={index}>
                  {item}
                </td>
              );
            })}
          </tr>
        </thead>
        <tbody >
          { postData.length != 0 ? postData.data.map((post, i) => {
            return (
              <tr>
                <td>{i + 1}</td>
                <Link to="/NoticeRead">
                  <td> {post.title}</td>
                </Link>
                <td>{post.createdDate.substring(0, 10)}</td>
                <td>{post.userName}</td>
              </tr>
            );
          })
        : <div> loading... </div>
		}
        </tbody>
    </>
  );

그럼 postData 가 초기값일때는 loading... 이라는 문구가 뜨고 postData 값이 바뀌었을때 게시판 목록이 렌더링 된다!