Modify

처음 데이터 입력 폼과 수정 폼의 ui는 동일
대신 수정에는 해당페이지의 id를 받는 형식

//수정할 페이지 id 받아온다
 const { id } = useParams();
 const boardId = Number(id);

기존

const [titleValue, settitleValue] = useState("");
  const [contentValue, setContentValue] = useState("");
const handleWrite = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!titleValue || !contentValue) {
      window.confirm("제목과 내용을 입력 해주세요");
      return;
    }
    try {
      const userData = {
        did: selectedBoardId, //board에서 불러 온 값
        title: titleValue,
        content: contentValue,
        timedata: new Date(),
        userUid: uidVar,
        isModified: true,
      };
      await dispatch(
        modifyUserData({
          boardId: boardSelectedId,
          boarditem: userData,
        }) as any
      );

      navigate(`/pagemo/${selectedBoardId}`); //수정 된 코드
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };

수정
state 하나로 통합

const [formValue, setFormValue] = useState({
    title: "",
    content: "",
  });
  
   const handleWrite = async (e: any) => {
    e.preventDefault();

    const filedName = e.target.name;
    const fieldValue = e.target.value;

    if (!formValue) {
      window.confirm("제목과 내용을 입력 해주세요");
      return;
    }
    try {
      const userData = {
        did: boardId,
        title: formValue.title,
        content: formValue.content,
        timedata: new Date(),
        userUid: userId,
        isModified: true,
        index: inputDataIdx,
      };
      await dispatch(
        modifyUserData({
          boardId: boardId,
          boarditem: userData,
        }) as any
      );

      setFormValue({
        ...formValue,
        [filedName]: fieldValue,
      });

      navigate(`/page/${boardId}`);
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };
  
  
  return
  <input
                type="text"
                maxLength={30}
                name="title"
                defaultValue={modifyUserDataLast.title} //등록된 데이터 출력
                placeholder="제목을 입력해주세요."
                onChange={(e) =>
                  setFormValue({ ...formValue, title: e.target.value })
                }
              />
               <textarea
                defaultValue={modifyUserDataLast.content}
                name="content"
                placeholder="내용을 입력 해주세요"
                onChange={(e) =>
                  setFormValue({ ...formValue, content: e.target.value })
                }
              />
              

form 컴포넌트와 크게 다른 부분은 없다