Form.tsx

impot

import React, { useState } from "react";

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

//액션 디스패치랑 상태 불러오기 위함이지
import { useDispatch, useSelector } from "react-redux";

//비동기 사용
import addUserData from "../../redux/thunks/boardFormThunk";

Form(){}

//board 상태 불러옴
  const selectedBoardId = useSelector(
    (state: any) => state.board.selectedBoardId
  );

  //Redux 스토어에 있는 액션을 디스패치
  const dispatch = useDispatch();

  //사용자가 입력 한 데이터 관련 hook
  const [titleValue, settitleValue] = useState("");
  const [contentValue, setContentValue] = useState("");

//화면 이동
  const navigate = useNavigate();

 const handleWrite = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      //userData는 이 액션에 전달할 데이터
      //액션의 목적에 따라 어떤 데이터를 전달할지 정의
      const userData = {
        did: selectedBoardId, //board에서 불러 온 값
        title: titleValue,
        content: contentValue,
        timedata: new Date(),
      };

      await dispatch(
        addUserData({
          boardId: selectedBoardId,
          boarditem: userData,
        }) as any
      );

      settitleValue("");
      setContentValue("");

      // navigate("/page"); 기존 상세페이지로 이동 코드
      navigate(`/page/${selectedBoardId}`); //수정 된 코드
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };

return

return (
    <>
      <div className="container">
        <header>
          <h1>글작성 </h1>
        </header>
        <form onSubmit={handleWrite}>
          <div className="input_box">
            <input
              type="text"
              defaultValue={titleValue}
              placeholder="제목을 입력해주세요."
              onChange={(e) => settitleValue(e.target.value)}
            />
          </div>
          <div className="textarea_box">
            <textarea
              defaultValue={contentValue}
              placeholder="내용을 입력 해주세요"
              onChange={(e) => setContentValue(e.target.value)}
            ></textarea>
            <input type="file" className="file_box" />
          </div>
          <div className="form_btn_box">
            <input type="submit" value="등록" />
            <input type="button" value="취소" />
          </div>
        </form>
      </div>
    </>
  );
};

export default Form;

학습

navigate

• navigate/Link 차이 블로그참고

React.FormEvent<HTMLFormElement/

• e.preventDefault();
• 폼 이벤트를 다루기 위한 TypeScript의 이벤트 타입