board.tsx

순9·2023년 9월 12일
0

리액트 게시판

목록 보기
19/54

전체 코드

//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()

  • Object.values()
  • 상위 객체를 돌면서 각 상위 객체의 값들만을 배열로 반환

props.timedata.toString()

  • Type 'Date' is not assignable to type 'ReactNode'
  • 블로그 참고
  • Date 객체는 기본적으로 React가 이해하지 못하는
    데이터 타입으로 원하는 형식으로 날짜를 표시
profile
1. 사용법 익히기 2. 원리가 뭔지 찾아보기 3. 원리를 공부하기

0개의 댓글