[React] React와 express.js를 활용한 게시판 만들기(2)

BoardList.jsx

import React from 'react';
import { boardList } from '../data/data';
import { Button, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const BoardList = () => {
    return (
        <div className='board-list'>
            <h1 className='my-5 text-center'>게시글 목록</h1>

            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>제목</th>
                        <th>작성자</th>
                        <th>작성일</th>
                    </tr>
                </thead>

                <tbody>
                    {boardList.map(b => (
                        <tr key={b.id}>
                            <td>{b.id}</td>
                            <td>
                                <Link to = {{
                                    pathname : `/view/${b.id}`
                                }}>{b.title}</Link>
                            </td>
                            <td>{b.writer}</td>
                            <td>{b.reg_date}</td>
                        </tr>
                    ))}
                </tbody>
            </Table>
            <div className='text-end my-2'>
                <Link to={`/write`}>
                    <Button>작성하기</Button>
                </Link>
            </div>

        </div>
    );
};

export default BoardList;

BoardMain.jsx

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import BoardList from './BoardList';
import BoardWrite from './BoardWrite';
import BoardView from './BoardView';
import BoardModify from './BoardModify';

const BoardMain = () => {
    return (
        <div className='board-main'>
            <BrowserRouter>
            
                <Routes>
                    <Route path="/"           element={<BoardList />}   />
                    <Route path="/write"      element={<BoardWrite />}  />
                    <Route path="/view/:id"   element={<BoardView />}   />
                    <Route path="/modify/:id" element={<BoardModify />} />
                </Routes>
            
            </BrowserRouter>
        </div>
    );
};

export default BoardMain;

 

 

BoardModify.jsx

import React from 'react';
import { useParams } from 'react-router-dom';
import { boardList } from '../data/data';
import { Row, Col, Form, Button } from 'react-bootstrap';

const BoardModify = () => {

    const { id } = useParams();
    const idx = boardList.findIndex(b => b.id === Number(id)); 
    const board = boardList[idx];


    return (
        <div className='board-modify'>
            <Form>
                <Row className='my-5'>
                    <Col className='p-5'>
                        <h1 className='text-center my-5'>{board.id}번 게시글 수정</h1>
                    
                        <Form.Label>제목</Form.Label>
                        <Form.Control className='my-3' name='title' placeholder={board.title} />

                        <Form.Label>작성자</Form.Label>
                        <Form.Control className='my-3' name='writer'placeholder={board.writer} />

                        <Form.Label>내용</Form.Label>
                        <Form.Control as='textarea' rows={10} className='my-3' name='contents' placeholder={board.contents} />

                        <div className='text-center'>
                            <Button className='mx-2 px-3 btn-sm'>수정</Button>
                            <Button className='mx-2 px-3 btn-sm' variant='secondary'>초기화</Button>
                        </div>                
                    </Col>
                </Row>
            </Form>
        </div>
    );
};

export default BoardModify;

BoardView.jsx

import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { boardList } from '../data/data';
import { Button, Row, Col, Card } from 'react-bootstrap';

const BoardView = () => {

    const { id } = useParams();
    const idx = boardList.findIndex(b => b.id === Number(id));
    // 배열 boardList에서 특정 조건을 만족하는 요소의 인덱스를 찾는 JavaScript의 배열 메소드인 findIndex를 사용한 코드
    // b : 배열 각각의 요소
    // b.id : 배열의 현재 요소 'id'속성
    // Number(id) : 주어진 'id'를 숫자로 반환

    console.log(`id : ${id}`);
    console.log(`idx : ${idx}`);

    const board = boardList[idx];
    console.log(board);

    return (
        <div className='board-view'>
            <Row className='my-5'>
                <Col className='px-5'>
                    <h1 className='my-5 text-center'>{board.id}번 게시글 정보</h1>
                    
                    <div className='text-end my-2'>
                        <Link to = {{
                            pathname : `/modify/${id}`
                        }} >
                        <Button className='btn-sm mx-2'>수정</Button></Link>
                        <Button className='btn-sm' variant='danger'>삭제</Button>
                    </div>

                    <Card>
                        <Card.Body>
                            <h5>[{board.id}] {board.title}</h5>
                            <hr/>
                            <div className='cArea'>{board.contents}</div>
                        </Card.Body>

                        <Card.Footer>
                            Created on {board.reg_date} by {board.writer}
                        </Card.Footer>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default BoardView;

 

BoardWrite.jsx

import React from 'react';
import {Row, Col, Button, Form} from 'react-bootstrap';

const BoardWrite = () => {
    return (
        <div className='board-write'>
            <Form>
                <Row className='my-5'>
                    <Col className='p-5'>
                        <h1 className='text-center my-5'>게시글 작성</h1>
                    
                        <Form.Label>제목</Form.Label>
                        <Form.Control className='my-3' name='title' placeholder='제목을 입력하세요.' />

                        <Form.Label>작성자</Form.Label>
                        <Form.Control className='my-3' name='writer' placeholder='작성자를 입력하세요.' />

                        <Form.Label>내용</Form.Label>
                        <Form.Control as='textarea' rows={10} className='my-3' name='contents' placeholder='내용을 입력하세요.' />

                        <div className='text-center'>
                            <Button className='mx-2 px-3 btn-sm'>저장</Button>
                            <Button className='mx-2 px-3 btn-sm' variant='secondary'>초기화</Button>
                        </div>
                    </Col>
                </Row>
            </Form>
        </div>
    );
};

export default BoardWrite;

App.css

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.App {
    padding: 10px;
    width: 1200px;
    height: 600px;
    background-color: lightskyblue;
    margin: 0 auto;
}


.cArea {
    height: 200px;
}

.board-list {
    width: 95%;
    margin: auto;
}

App.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import BoardMain from './component/BoardMain';

function App() {
  return (
    <div className="App">
      <BoardMain />
    </div>
  );
}

export default App;