//state 불러오기 위해
import { useSelector } from "react-redux";
//화면 이동을 위해 BrowserRouter연동
import { Link } from "react-router-dom";
const Board = () => {
//주석 된 코드는 board id 별로 boarditem 출력 되는 코드
// const selectedBoardId = useSelector(
// (state: any) => state.board.selectedBoardId
// );
// const userData = useSelector((state: any) => {
// return state.boardItemMap.boarditem[selectedBoardId];
// });
// console.log(`${selectedBoardId} 아이디 입니다`);
// boardItemSlice에서 가져온 state
const boardItemState = useSelector(
(state: any) => state.boardItemMap.boarditem
);
// console.log(`${boardItemState} 데이터 입니다`);
interface BoardItemi {
index: number;
title: string;
timedata: Date;
}
//출력되는 아이템 상세페이지로 가위 해 Link로 감쌈
//상위 App.tsx에서 BrowserRouter사용 연동될 컴포넌트도 연동 Link 사용 가능
const BoardItem = (props: BoardItemi) => {
return (
<li>
<Link to="/page">
<div>{props.index}</div>
<div>{props.title}</div>
{/* Type 'Date' is not assignable to type 'ReactNode' 에러와 만남 */}
<div>{props.timedata.toString()}</div>
</Link>
</li>
);
};
return (
<>
<div className="container">
<div className="board_box">
<div className="board_top">
<ul>
<li>
<div>No.</div>
<div>제목</div>
<div>작성일</div>
</li>
</ul>
</div>
<div className="board_body">
<ul>
{/* 아래 주석된 코드는 boardItemSlice를 가져와서
데이터 출력 하려는 코드이지만 내용은 undefind
{boardItemState.map((item: any, index: number) => (
<BoardItem
key={index}
index={index}
title={item.title}
timedata={item.timedata}
/>
))} */}
{/* Object.values(boardItemState)를 사용하면 상위 객체를 돌면서
각 상위 객체의 값들만을 배열로 반환
상위 객체의 키는 무시되고 값들만이 배열에 포함 */}
{Object.values(boardItemState).map((items: any) =>
items.map((item: any, innerIndex: number) => (
<BoardItem
key={innerIndex}
index={innerIndex}
title={item.title}
timedata={item.timedata}
/>
))
)}
</ul>
</div>
{/* 여긴 아직 작업중 */}
<div className="pagenation_box">
<div className="pagenation">
<ul>
<li>이전</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>다음</li>
</ul>
</div>
</div>
</div>
</div>
</>
);
};
export default Board;
Object.values()
props.timedata.toString()