코드정리 Board

Board

중복 코드, 사용하지 않는 라이브러리 정리

날짜
기존 코드

const modifiedData = useSelector((state: any) => state.boardModify.boarditem);
const moDataVar: any = modifiedData[Number(id)];

const userDates = new Date(moDataVar[0].timedata);

  const yesr = userDates.getFullYear();
  //Date 객체에서 월(Month)은 0부터 시작하기 때문에
  //제로 표시된 월을 구하려면 1을 더해주어야 합니다.
  const month = userDates.getMonth() + 1;
  const date = userDates.getDate();

  const userDate = `${yesr}.${month}.${date}`;

코드 수정

 function formatDate(dateSt: string) {
    const userDates = new Date(dateSt);
    return userDates.toLocaleDateString("ko-KR");
  }
  
  return(
   <div>{formatDate(item.timedata)}</div>
  )

toLocaleDateString1
toLocaleDateString2

데이터 출력
기존 코드
문제점
1. 조건을 건 상태에서 알맞은 페이지 이동는 되나 li안에 Link와 onClick 중복
2. 조건이 제대로 되어 있지않아서 onClick의 함수 내용대로 이동 됨

 const handleItemClick = (id: number) => {
    dispatch(selectBoard(id));
    const checkDb = boardItemState[id][0];

    if (boardItemModifyState?.[id]?.[0]?.isModified === true) {
      navigate(`/pagemo/${id}`);
    } else if (checkDb.isModified === false) {
      navigate(`/page/${id}`);
    }
  };
  
  
  return
   <ul>
              {getItemsForPage(currentPage).map((items: any, index) =>
                items.map((item: any, innerIndex: number) => {
                  const isModifiedData = boardItemModifyState[item.did];
                  // const isModifiedDataItem = isModifiedData.slice(-1);
                  if (isModifiedData?.[0]?.isModified === true) {
                    return (
                      <li
                        key={innerIndex}
                        onClick={() => handleItemClick(item.did)}
                      >
                        <Link to={`/page/${item.did}`}>
                          <section className="link_map">
                            <div>{index}</div>
                            <div>{isModifiedData[0].title}</div>
                            <div>{formatDate(item.timedata)}</div>
                          </section>
                        </Link>
                      </li>
                    );
                  } else {
                    return (
                      <li
                        key={innerIndex}
                        onClick={() => handleItemClick(item.did)}
                      >
                        <Link to={`/page/${item.did}`}>
                          <div className="link_map">
                            <div>{index}</div>
                            <div>{item.title}</div>
                            <div>{formatDate(item.timedata)}</div>
                          </div>
                        </Link>
                      </li>
                    );
                  }
                })
              )}
            </ul>

수정
1. onClick제거 조건을 데이터중에 true 인지 비교 하여 데이터 출력 false면 수정 전 true면 수정된 데이터
2. 데이터차 중첩으로 되어 있어고 수정된 데이터가 없으면 에러가 나기에 옵셔널 체이닝 연산자 활용 하여 에러 방지

  <ul>
              {getItemsForPage(currentPage).map((items: any, index) =>
                items.map((item: any, innerIndex: number) => {
                  const isModifiedData = modifyBoarddata[index]?.[innerIndex];
                  const isModifiedDatas = modifyBoarddata?.[innerIndex];

                  const lastisModifiedDataLengh = isModifiedDatas?.length - 1;
                  const lasteModified =
                    isModifiedDatas?.[lastisModifiedDataLengh];

                  if (isModifiedData?.isModified === true) {
                    return (
                      <li
                        key={innerIndex}
                        style={{ backgroundColor: "orange" }}
                      >
                        <Link to={`/page/${item.did}`}>
                          <section className="link_map">
                            <div>{index}</div>
                            <div>{lasteModified.title}</div>
                            <div>{formatDate(item.timedata)}</div>
                          </section>
                        </Link>
                      </li>
                    );
                  } else {
                    return (
                      <li key={innerIndex}>
                        <Link to={`/page/${item.did}`}>
                          <div className="link_map">
                            <div>{index}</div>
                            <div>{item.title}</div>
                            <div>{formatDate(item.timedata)}</div>
                          </div>
                        </Link>
                      </li>
                    );
                  }
                })
              )}
            </ul>