[감정 일기장 만들기] edit페이지

미아·2023년 1월 12일

REACT

목록 보기

34/41

가장 먼저 데이터 가져오기

=> 안됨

app.js에서

=> 요렇게 pathVariable 방식 사용해주고

Edit.js

=> edit/id(숫자) 로 들어오면 알아볼 수 있게 해주는 로직

import { useContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { DiaryStateContext } from "../App";
import DiaryEditor from "../components/DiaryEditor";

const Edit = () => {
  // useState
  const [originData, setOriginData] = useState();
  //useNavigate 이용해서 페이지 이동하기
  const navigate = useNavigate();

  const { id } = useParams();
  //useParams - 리액트가 공식 제공하는 훅은 아니지만, 사용자 정의 훅
  //  /:id 이런식으로 변수 담아서 전달하는 방식을 pathVariable이라고 부름
  console.log(id); // 확인 완

  //데이터 보관하는곳은? app.js의 data 컴포넌트
  const diaryList = useContext(DiaryStateContext);
  console.log(diaryList); // 확인 완

  //edit 컴포넌트가 mount됐을때 diaryList에서 우리가 찾는 id값과 일치하는거 뽑아오기
  useEffect(() => {
    // 일기데이터가 하나라도 들어있을때 꺼낸다
    if (diaryList.length >= 1) {
      //혹시 문자열 들어가있을수도 있으니까 형변환해준다.
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );
      console.log(targetDiary); // 확인 완

      //만약 입력하지않은 아이디가 들어온다면 예외처리 해줘야함 ✔️ 이때 참으로 들어오면 원래 데이터 넣어줘야함(useState)
      if (targetDiary) {
        //truthy / falsy !! undefined면 아예 안들어옴
        setOriginData(targetDiary);
      } else {
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);
  return (
    <div>
      {/* originData가 있으면 DiaryEditor 랜더하도록, 그럼 새일기쓰기 페이지 나오므로 prop으로 받아서 수정폼으로 변환 */}
      {originData && <DiaryEditor isEdit={true} originData={originData} />}
    </div>
  );
};
export default Edit;

prop으로 전달한 isEdit과 originData를 이용해서 DiaryEditor에서 수정으로 바꾸기

=> prop으로 받아야함!

useEffect 실행

  //isEdit, originData가 바뀔때만 실행한 useEffect 훅 실행
  useEffect(() => {
    if (isEdit) {
      //isEdit이 true일때만 동작
      setDate(getStringDate(new Date(parseInt(originData.date))));
      setEmotion(originData.emotion);
      setContent(originData.content);
    }
  }, [isEdit, originData]);

=> isEdit에 따라 바뀌면 됨

onCreate가 아닌, onEdit이 수행되면 된다

  //onCreate, onEdit 쓰려면 useContext 써야함
  const { onCreate, onEdit } = useContext(DiaryDispatchContext);
  // 작성완료 버튼 누를시 넘어가는 페이지 만들기 -> onCreate함수 실행하게
  const handleSubmit = () => {
    if (content.length < 1) {
      contentRef.current.focus();
      return;
    }
    // confirm 해주기
    if (
      window.confirm(
        isEdit ? "일기를 수정하시겠습니까?" : "새로운 일기를 작성하시겠습니까?"
      )
    ) {
      if (!isEdit) {
        onCreate(date, content, emotion);
      } else {
        //수정중일때는 전달해야하는 데이터가 originData, 순서 맞춰서 줘야함
        onEdit(date, content, emotion, originData.id);
      }
    }

    navigate("/", { replace: true });
    //replace : true는 뒤로 못오게 막는 옵션
  };