게임모드공유웹 <ModHub> 제작기 - 게시판 구현하기

백엔드를 아직 구축하지 않았으므로 임시 데이터를 만들자.

sampleData.jsx

export const posts = [
    { id: 1, title: '1번째 게시글', user: '홍길동', data: '2024-12-01', views: 123},
    { id: 2, title: '2번째 게시글', user: '김영태', data: '2024-12-02', views: 456},
    { id: 3, title: '3번째 게시글', user: '김종수', data: '2024-12-03', views: 789},
    { id: 4, title: '4번째 게시글', user: '주호민', data: '2024-12-04', views: 137},
]

board.jsx

import React from "react";

const Board = ({posts}) => {
    return (
        <div className="boardContainer">
            <h1 className="title">게시판</h1>
            <table className="table">
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>제목</th>
                        <th>작성자</th>
                        <th>날짜</th>
                        <th>조회수</th>
                    </tr>
                </thead>
                <tbody>
                     {posts.map((post)=>(
                        <tr key={post.id}>
                            <td>{post.id}</td>
                            <td className="titleCell">{post.title}</td>
                            <td>{post.user}</td>
                            <td>{post.data}</td>
                            <td>{post.views}</td>
                        </tr>
                     ))}
                </tbody>
            </table>
        </div>
    );
};
export default Board;

게시판 페이지를 생성

routes.jsx

<Route path="/board" element={<Board />} />

라우터에 경로를 추가하고

navigation.jsx

<Nav.Link href="board">게시판</Nav.Link>

네비게이션바에도 목록을 하나 추가했다.

에러

이런 에러가 뜬다.
board.jsx에서 사용한 map함수가 다루는 배열을 인식하지 못했다는건데, 데이터가 제대로 전달되지 않는 문제 같다.

해결

route.jsx

<Route path="/board" element={<Board posts={posts} />} />

라우터에서 페이지를 넘겨줄 때 해당하는 데이터도 같이 삽입해야 데이터가 정상적으로 전달된다.

정상적으로 게시판이 출력된다.