form.tsx

ui

데이터 등록 전

데이터 등록 후

전체코드

import React, { useState } from "react";

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

import { useDispatch, useSelector } from "react-redux";

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

const Form = () => {

//board이름을 가진 슬라이스에서 selectedBoardId가진 값을 가져온다
  const selectedBoardId = useSelector(
    (state: any) => state.board.selectedBoardId
  );

  const dispatch = useDispatch();

//사용자가 입력한 값
  const [titleValue, settitleValue] = useState("");
  const [contentValue, setContentValue] = useState("");

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

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

    try {
      //userData는 액션에 전달할 데이터
      //타입스크립트를 사용 하였기 때문에 데이터를 객체 형태로 담아서
      //addUserData 리듀서 함수의 파라미터로 전달
      const userData = {
        // index: "",
        title: titleValue,
        content: contentValue,
        timedata: new Date(),
      };

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

      // navigate("/page"); 상세페이지로 이동
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };
  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;

학습

useDispatch : Redux 스토어에 액션을 디스패치(dispatch)하는 데 사용
useSelector : Redux 스토어의 상태(state)를 선택하는 데 사용