modifyPage

수정 된 데이터가 보여 지는 상세페이지

import

import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";

ModifyPage

//boardItemMap 상태 선택
  const userData = useSelector((state: any) => state.boardItemMap.boarditem);
  const modata = useSelector((state: any) => state.boardModify.boarditem);
  console.log(modata);
  const userUidValue = useSelector((state: any) => state.login.user);
  const uidVar = userUidValue?.uid;

  const navigate = useNavigate();

  //데이터를 각 key에 맞춰 넣기 위해 비구조화 할당 사용
  const moDataVar: any = modata[Number(id) as any][0];
  const { did, title, content, timedata, userUid } = moDataVar;

const dispatch = useDispatch();

  //id의 타입이 string이어서 number로 타입 변경
  const boardId = Number(id);

  const handleDelete = async () => {
    try {
      window.confirm("삭제 하시 겠습니까?");
      //목록 페이지로 이동
      navigate("/");
    } catch (error) {
      console.log(error);
      console.log("삭제가 안됩니다");
    }
  };
   const userDates = new Date(moDataVar.timedata);

  const yesr = userDates.getFullYear();
  const month = userDates.getMonth() + 1;
  const date = userDates.getDate();
  const userDate = `${yesr}.${month}.${date}`;

return

 return (
    <>
      {/* Page 컴포넌트의 내용을 id에 따라 동적으로 표시 */}
      <div className="container">
        <div className="page_box">
          {moDataVar.userUid === uidVar && moDataVar.did === boardId && (
            <section>
              <p className="title">{moDataVar.title}</p>
              <div className="userInfo">
                <span>{userUidValue.displayName}</span>
                <span>{userDate}</span>
              </div>
              <div className="page_txt">{moDataVar.content}</div>
            </section>
          )}
        </div>
        <div className="board_back_btn">
          <Link to="/">목록</Link>
        </div>

        <div className="page_btn">
          {modata.userUid === uidVar && (
            <div>
              <div className="edit_btn">
                <Link to={`/pagemodify/${id}`}>수정</Link>
              </div>
              <input
                type="button"
                onClick={() => handleDelete()}
                value="삭제"
              />
            </div>
          )}
        </div>
      </div>
    </>
  );

&&논리연산자
moDataVar.userUid === uidVar && moDataVar.did === boardId && (코드)
moDataVar.userUid의 값과 uiVar이 true고
moDataVar.did와 boardId이 true 일때 (코드)출력
첫 좌측이 true면 우측을 반환 하고 두번째 좌측이 true면 우측을 반환

modata.userUid === uidVar &&(코드)
좌측이 true일때 우측을 반환