[React]수정하기

DetailPageModal.jsx

import React, { useState } from "react";
import { Modal } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { FaTimes } from "react-icons/fa";
import { editBody } from "../../redux/modules/movieSlice";
import "./DetailPageModal.scss";

const DetailPageModal = ({ show, onHide, setShow, id }) => {
  									//19. props로 받기
  const dispatch = useDispatch();
  const initialState = {
   //4. 초기값 만들어주기 
    id: 0,
    body: "",
  };

  let [edit_Body, setEditBody] = useState(initialState);
  //4. let[editBody, setEditBody] = useState(초기값);
  //7. consol.log(edit_Body) 하면
  // 콘솔에 {id:0, body: 인풋창에 타자친것들이 뜸}
  // 우린 edit_Body에서 body만 필요하니까 

  let inputeditBody = (e) => {
  //6. onChange 했을때 나올 inputeditBody 함수 만들어주기
    const { name, value } = e.target;
    setEditBody({ ...edit_Body, [name]: value, id: id });
  }; 

  let onSubmitHandler = (event) => {
    //11.onSubmitHandler 함수 만들어주기 
    if (edit_Body.body === "") {
      event.preventDefault();
      alert("내용을 모두 채워주세요!!");
      //12.유효성검사 -> edit_Body가 빈칸일때 alert 뜸
    } else {
      event.preventDefault();
      dispatch(editBody(edit_Body));
      //13. edit_Body(action.payload값)의 데이터를 editBody라는 dispatch함수로 보내주라  
      console.log(edit_Body);
      setEditBody(initialState);
      // 14.작성후 인풋창 초기화(빈칸)만들어주기 (여긴 모달창 꺼져서 사실 필요없음 근데 수정후 다시 모달창 띄우면 그전에 작성한거 남아있음 ) 
      alert("정상적으로 등록 되었습니다.");
      setShow(false);
      //15. detail 페이지에서 함수 만들어주기 
      // 16.등록되면 자동으로 창 꺼주기
    }
  };

  return (
    <Modal
      show={show}
      onHide={onHide}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <div className="modalBox">
        <FaTimes className="faArrowLeft" onClick={onHide} />
        <div className="editWrap">
          <input
            className="editBody"
	//1.인풋창에 넣었을때 값을 가져와야한다 
            name="body"
	// 2. 네임은 바디
            value={edit_Body.body}
	//3. value="" 
	//빈칸으로 적어주고 안에 내용은 나중에 생각해보자
	//8. value={edit_Body.body}  넣어줌 
	//9. 이제 edit_Body에 들어가는 값을 알아냄 그리고 이제 수정완료 버튼을 눌렀을때 dispatch로 들어가야함  
	
            type="text"
            placeholder="내용을 입력해주세요"
            onChange={inputeditBody}
	// 5. onChange={inputeditBody}
	//인풋창에 뭔가 썻을때가 onChange가 되는거다=> onChange는 inputeditBody가 됨
          ></input>
          <button onClick={onSubmitHandler} 
	//10. onClick 이벤트 시 onSubmitHandler 함수가 발생한다
className="edit_done_btn">
            수정완료
          </button>
        </div>
      </div>
    </Modal>
  );
};

export default DetailPageModal;

Detail .jsx

import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import "./detail.scss";
import DetailPageModal from "../../components/detailPageModal/DetailPageModal";
import { deleteMovie, editBody, getBody } from "../../redux/modules/movieSlice";
import shortid from "shortid";

const Detail = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { id } = useParams();

  const [modalOn, setModalOn] = useState(false);

  let movies = useSelector((state) => state.movies);
  const movie = movies.find((movie) => movie.id == id);

  return (
    <div>
      <div className="detailWrap">
        <div className="detailBox">
          <div className="imgBox">
            <img src={movie.img} />
          </div>
          <div className="contentBox">
            <h2>{movie.title}</h2>
            <h5>{movie.userid}</h5>

            <p>{movie.body}</p>

            <div className="btn_set">
              <button className="btn_edit" onClick={() => setModalOn(true)}>
                수정하기
              </button>
              <button
                className="btn_dele"
                onClick={() => {
                  dispatch(deleteMovie(movie.id));
                  navigate("/");
                }}
              >
                삭제하기
              </button>
            </div>
          </div>
        </div>
      </div>
      <DetailPageModal show={modalOn} id={id} setShow={setModalOn} onHide={() => setModalOn(false)}>
        //17.setShow={setModalOn}
        //18. modal.jsx에서 setShow를 props로 내려주기
        // 여기는 부모 컴포넌트로 자식컴포넌트(detailModal.jsx)로 내려주기 위해 show={modalOn} setShow={setModalOn} 으로 정의를 내려줘야함
        // 자식 컴포넌트에한테 show를 보내줄껀데 show는 부모컴포넌트에서 정의해준 ModalOn 이다 
        // 바로 똑같은 이름으로 못내려주고 정의를 해야함 
        {" "}
      </DetailPageModal>
    </div>
  );
};

export default Detail;

slice 부분

editBody: (state, action) => {
      state = state.map((data) => {
        if (data.id == action.payload.id) {
          //id를 하나는 숫자 하나느 스트링으로 받기때문에 === 이 아닌 ==으로 해준다
          // state map을 해줬을때
       	//date(배열)의 id가 action.payload.id 값이 똑같으면 
          data.body = action.payload.body;
       //action.payload(edit_Body)의 body값을 date의 body로 바꿔준다
        }
        return data;
      });