React + TypeScript 게시판 리스트

Spring boot로 서버 코드를 대략 작성한 후, 프론트 코드로 불러오고 싶었다.

그래서 구글링하면서 그냥 코드를 짜보기로 했다 ㅎ

프론트로 처음 프로젝트에 참여하고, 안 만져본지 오래돼서 가물가물했다 ,,

게시판 리스트 화면 만들기

import React, { useEffect, useState } from 'react'
import axios from 'axios';

const BoardPage = () => {
    const [boardList, setList] = useState([{
        id: '',
        title: '',
        content: '',
        createdOn: ''
    }]);

    useEffect(() => {
        axios.get("/boards").then(res => setList(res.data))
        .catch(error => console.log(error))
    })

    return (<div className='container'>
        <div className='boardList'>
            <table className='boardTable'>
                <thead>
                    <tr>
                        <th>
                            번호
                        </th>
                        <th>
                            제목
                        </th>
                        <th>
                            작성일자
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {dummyData.map((board) => {
                        return (
                            <tr key={board.id}>
                                <td>{board.id}</td>
                                <td>{board.title}</td>
                                <td>{board.createdOn}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        </div>
    </div>)
}

export default BoardPage

const dummyData = [
    {
      id: 3,
      title: '테스트 게시글입니다. 내용없습니다.',
      content: '쭈헤이',
      createdOn: '2020-10-04',
    },
    {
      id: 2,
      title: '게시판 테스트입니다.',
      content: 'admin',
      createdOn: '2020-10-03',
    },
    {
      id: 1,
      title: '공지사항입니다. 필독 부탁드립니다!',
      content: 'admin',
      createdOn: '2020-10-01',
    },
  ]

먼저, 게시판 리스트를 불러오는 페이지를 만들어보려고 한다.

일단 테이블 형태가 가장 보편적인 것 같아 테이블 형태로 만들어봤다.

<table> 은 각각 셀로 만드는데, header cell과 standard cell로 이루어진다.

<th> : 표의 제목

<tr> : 표의 가로줄

<tbody> : 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용

일단 급하게 메인에 띄워봤다 ㅎㅎ 잘 되는 것 같다

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import './App.css';
import BoardPage from './pages/BoardPage';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<BoardPage/>} />
          </Routes>
        </BrowserRouter>
      </header>
    </div>
  );
}

export default App;

위는 Router 설정이다.

css 파일도 추가해 이렇게 표처럼 만들었다.

헤더 추가하기

하지만 헤더를 추가해 더 그럴듯하게 만드려고 하던 찰나에 잘 되질 않았다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import BoardPage from './pages/BoardPage';

function App() {
  return (
    <React.Fragment>
      {/* <Header/> */}
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<BoardPage/>} />
        </Routes>
      </BrowserRouter>
    </React.Fragment>

  );
}

export default App;

위에 주석처리된 Header 컴포넌트를 추가하기만 하면 아예 흰 화면만 출력이 되고,

이처럼 컴포넌트 또한 아예 없는 것을 확인할 수 있었다 .. 대체 어떤 문제인거지

function App() {
  return (
    <React.Fragment>
      <BrowserRouter>
      <Header />
        <Routes>
          <Route path="/" element={<BoardPage/>} />
        </Routes>
      </BrowserRouter>
    </React.Fragment>
  );
}

이렇게 Header 컴포넌트를 BrowserRouter 안에 넣으니 헤더가 잘 보였다 ..!

짜잔 드디어 틀을 다 짰다.. 이제 다시 서버 코드를 건드려서 페이징을 완성한 후에 한 번 프론트랑 연결해보도록 하겠다.