SW과정 REACT 12일차 0910

1. Spring <=> VSC 게시판 연동 코드

Board.js 코드

import React from "react";
import Home from "../routes/Home";
import './Board.css';


class Board extends React.Component{
    state={

        boardList:[],
    }

getBoards=async ()=>{
    const resultData =await axios.get('http://localhost:9999/boardList2')
    console.log(resultData.data);
    this.setState({boardList: resultData.data})
}

componentDidMount(){
    this.getBoards();
}    


render(){
    return (
        <div className="about__container">
            <table className='table table-striped'>
                <thead className='thead-dark'>
    
            <tr>
                <th>글번호</th>
                <th>글제목</th>
                <th>글쓴이</th>
                <th>작성일</th>
            </tr>
                </thead>
                <tbody> 
                    {
                        this.state.boardList.map((item,index)=>{                               
                            if(item.parentNo===0){
                                return <tr key={index}><td>{item.articleNo}</td><td><font size="3" title={item.content}>{item.title}</font></td><td>{item.id}</td><td>{item.writeDate}</td></tr>
                            }else{
                                let icon='↪️';
                                for(let i=2;i<item.level;i++){
                                    icon += icon;
                                }
                                return <tr key={index}><td>{item.articleNo}</td><td><font size="2" title={item.content}>{icon}{item.title}</font></td><td>{item.id}</td><td>{item.writeDate}</td></tr>
                            }
                        })
                    }
                </tbody>
            </table>
        </div>
    );
}

}
export default Board;

Board.css

body{
    position: relative;
    width:100%;
    height: 100%;
}
.board-container {
    position: absolute;
    left: 10%;
    margin-top: 50px;
    overflow-x: auto;
}

.board-table {
    width:100%;
    min-width: 500px;
    border-top: 1px solid #444444;
    border-collapse: collapse;
    font-family: 'Sunflower', sans-serif;
}

.thead-dark {
    background-color:#f0f9fe;
}

th, td {
    border-bottom: 1px solid #444444;
    border-left: 1px solid #444444;
    padding: 10px;
}

th:first-child, td:first-child {
    border-left: none;
}

.board-detail-container {
    margin: 100px;
}```

> BDetail.js```
import axios from "axios";
import React from "react";


class BDetail extends React.Component{


getBoards=async ()=>{
    const resultData =await axios.get('http://localhost:9999/boardList2');
    console.log(resultData);
}

componentDidMount(){
    const {location, history}=this.props;
    if(location.state===undefined){
        history.push('/');
    }else{
        this.getBoards();
    }
}    


render(){
    const {location} = this.props;
    console.log({location});
    if(location.state){
        return(
            <div className="board-detail-container">
                <p><span>글번호:</span>{location.state.item.articleNo}</p>
                <p><span>글제목:</span>{location.state.item.title}</p>
                <p><span>내용:</span>{location.state.item.content}</p>
                <p><span>작성자:</span>{location.state.item.id}</p>
            </div>
        )
    }else{
        return null;
    }
}
}
export default BDetail;

BDetail.js

import axios from "axios";
import React from "react";


class BDetail extends React.Component{


getBoards=async ()=>{
    const resultData =await axios.get('http://localhost:9999/boardList2');
    console.log(resultData);
}

componentDidMount(){
    const {location, history}=this.props;
    if(location.state===undefined){
        history.push('/');
    }else{
        this.getBoards();
    }
}    


render(){
    const {location} = this.props;
    console.log({location});
    if(location.state){
        return(
            <div className="board-detail-container">
                <p><span>글번호:</span>{location.state.item.articleNo}</p>
                <p><span>글제목:</span>{location.state.item.title}</p>
                <p><span>내용:</span>{location.state.item.content}</p>
                <p><span>작성자:</span>{location.state.item.id}</p>
            </div>
        )
    }else{
        return null;
    }
}
}
export default BDetail;