[SpringBoot] React + TypeScript + JPA 프로젝트 (5) - 게시판 만들기(목록)

이전글

https://greed-yb.tistory.com/307

[SpringBoot] React + TypeScript + JPA 프로젝트 (4) - 회원가입, 로그인 하기

 

 

 

 

 

 

 

 

게시판 목록 페이지

이전글과 마찬가지로

Bootstrap 에 있던 tables-data.html 을 board.tsx 파일로 만들었다

 

board.tsx

 

axios 로 데이터를 불러와 목록을 만들기 위해

하드코딩되어 있는 <tbody> 안의 <tr> 태그들을 다 지워준다

 

 

 

 

 

board.tsx

import React, {useEffect, useState} from "react";
import axios from "axios";
import {Link} from "react-router-dom";


function Board() {

    const [BoardList, setBoardList] = useState([{
        no: '',
        title: '',
        writer: '',
        created: ''
    }]);

    useEffect(() => {
        axios.get("/api/boardList")
            .then(res => setBoardList(res.data))
            .catch(err => console.log("error : " + err))
    }, []);
    
        return (
        <main id="main" className="main">

            <div className="pagetitle">
                <h1>Data Tables</h1>
                <nav>
                    <ol className="breadcrumb">
                        <li className="breadcrumb-item"><Link to="/">Home</Link></li>
                        <li className="breadcrumb-item">Tables</li>
                        <li className="breadcrumb-item active">Data</li>
                    </ol>
                </nav>
            </div>
            <section className="section">
                <div className="row">
                    <div className="col-lg-12">

                        <div className="card">
                            <div className="card-body">
                                <h5 className="card-title">게시판 목록</h5>
                                <p>Add lightweight datatables to your project with using the <a
                                    href="https://github.com/fiduswriter/Simple-DataTables" target="_blank">Simple
                                    DataTables</a> library. Just add <code>.datatable</code> class name to any table you
                                    wish to conver to a datatable. Check for <a
                                        href="https://fiduswriter.github.io/simple-datatables/demos/" target="_blank">more
                                        examples</a>.</p>

                                <table className="table datatable">
                                    <thead>
                                    <tr>
                                        <th>
                                            No
                                        </th>
                                        <th>Title</th>
                                        <th>Writer</th>
                                        <th data-type="date" data-format="YYYY/DD/MM">Created</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {
                                        BoardList.map((board) => {
                                            return (
                                                <tr key={board.no}>
                                                    <td>{board.no}</td>
                                                    <td>{board.title}</td>
                                                    <td>{board.writer}</td>
                                                    <td>{board.created}</td>

                                                </tr>
                                            )
                                        })
                                    }
                                    </tbody>
                                </table>

                            </div>
                        </div>

                    </div>
                </div>
            </section>

        </main>
        
        
            );
}

export default Board;

 

<tbody> 태그 안에서

axios 로 받은 데이터를 map 으로 return 시키는 게 핵심이다

 

 

 

BoardController

@RestController
@RequestMapping("/api/*")
public class BoardController {

    @GetMapping("/boardList")
    public List<BoardVo> boardList() throws Exception{
        
        List<BoardVo> vo = new ArrayList<>();
        
        // 임시 test 용 데이터
        BoardVo test = new BoardVo();
        test.setNo(1L);
        test.setTitle("Test 제목");
        test.setWriter("test");
        test.setContents("공백");
        test.setCreated("2000/02/10");

        vo.add(0 , test);
        return vo;
    }
}

 

 

 

 

TEST

임시 데이터가 정상적으로 나오고 있다

페이징은 다음글에서 다루도록 하겠다