[23Ideal/React] 게시판 만들기 (1) - 게시판 테이블 만들기

게시물 목록을 보여줄 게시판 테이블을 만들어보자

게시판 테이블에는 글 번호, 제목, 작성일, 작성자 영역이 있으며
제목을 누르면 "NoticeRead" 라는 상세 내용 조회 페이지로 이동할 수 있다

import React from "react";
import { Link } from "react-router-dom";
import NoticeRead from "./read/NoticeRead";

const PostList = () => {

  const headersName = ["no", "제목", "작성일", "작성자"];
  
 const samples=[{
  boardId:'1',title:"첫번째 게시물",createdDate:"2021-12-04",userName:"관리자"
},
{
  boardId:'2',title:"두번째 게시물",createdDate:"2022-05-18",userName:"관리자"
},
{
  boardId:'3',title:"세번째 게시물",createdDate:"2022-07-17",userName:"관리자"
},
];

  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 >
          { samples.map((sample, i) => {
            return (
              <tr>
                <td>{i + 1}</td>
                <Link to="/NoticeRead" style={{ textAlign: "center", color: "black", listStyle: "none", textDecoration: "none", display: "inline-block", cursor: "pointer", }} >
                  <td> {sample.title}</td>
                </Link>
                <td>{sample.createdDate}</td>
                <td>{sample.userName}</td>
                <td>{sample.scraps}</td>
              </tr>
            );
          })
          }
        </tbody>
      </table>
    </>
  );
};

export default PostList;

렌더링할 게시물 목록의 no, 제목, 작성일, 작성자를 samples 배열로 선언해주고,
<table> 태그를 이용하여 테이블의 헤더, 바디를 작성해준다

<tbody> 에는 map을 이용하여 samples를 반복하여 렌더링 해준다

이렇게 코드를 작성하면 아래와 같은 게시물을 완성할 수 있다