Board.tsx

import

//state 불러오기 위해
import { useDispatch, useSelector } from "react-redux";

//선택된 보드
import { selectBoard } from "../../redux/slices/boardSlice";

//화면 이동을 위해 BrowserRouter연동
import { Link } from "react-router-dom";

Board(){}

const dispatch = useDispatch();

  // boardItemSlice에서 가져온 state
  const boardItemState = useSelector(
    (state: any) => state.boardItemMap.boarditem
  );

  //게시판 목록의 한줄 클릭시 실행 되는 함수
  //선택한 아이템의 ID를 파라미터로 받음
  //받은 id selectBoard로 보낸다
  const handleItemClick = (id: number) => {
    dispatch(selectBoard(id)); 
  };

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>
            {Object.values(boardItemState).map((items: any, index) =>
                items.map((item: any, innerIndex: number) => (
                  <li
                    key={innerIndex}
                    onClick={() => handleItemClick(item.did)}
                  >
                    <Link to={`/page/${item.did}`}>
                      <div>{index}</div>
                      <div>{item.title}</div>
                      {/* Type 'Date' is not assignable to type 'ReactNode' 에러와 만남 */}
                      <div>{item.timedata.toString()}</div>
                    </Link>
                  </li>
                ))
              )}
            </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;

고치기전 코드

//주석 된 코드는 board id 별로 boarditem 출력 되는 코드
  const boardobj = useSelector((state: any) => state.board.boards);
  const boardSelectedId = useSelector(
    (state: any) => state.board.selectedBoardId
  );
  
  
  //객체의 타입
  interface BoardItemi {
    index: number;
    title: string;
    timedata: Date;
  }


// 출력되는 아이템  상세페이지로 가기위해 Link로 감쌈
  // 상위 App.tsx에서 BrowserRouter사용 연동될 컴포넌트도 연동 Link 사용 가능
  // 선택한 아이템의 ID가 URL에 표시되고, 해당 ID를 Page 컴포넌트에서 추출하기 위해 코드 수정
  const BoardItem = (props: BoardItemi) => {
    return (
      <li>
      //선택한 boardSelectedId 로 이동을 생각 해서 넣었다
        <Link to={`/page/${boardSelectedId}`}>
          <div>{props.index}</div>
          <div>{props.title}</div>
          {/* Type 'Date' is not assignable to type 'ReactNode' 에러와 만남 */}
          <div>{props.timedata.toString()}</div>
        </Link>
      </li>
    );
  };
  
   {/* 아래 주석된 코드는 boardItemSlice를 가져와서 
              데이터 출력 하려는 코드이지만 내용은 undefind */}
              {boardItemState.map((item: any, index: number) => (
                <BoardItem
                  key={index}
                  index={index}
                  title={item.title}
                  timedata={item.timedata}
                />
              ))}
  
  

학습

Object.values()

• Object.values()
• 상위 객체를 돌면서 각 상위 객체의 값들만을 배열로 반환
• 사용한 이유는 모든 데이터들을 출력 하기 위해서 사용

props.timedata.toString()

• Type 'Date' is not assignable to type 'ReactNode'
• 블로그 참고
• Date 객체는 기본적으로 React가 이해하지 못하는
  데이터 타입으로 원하는 형식으로 날짜를 표시