[React] 미니프로젝트 - 일기장 글 수정 화면 구현하기

 

원본 일기 데이터 가져오기

 

              <Route path="/edit/:id" element={<Edit />} />

앱컴포넌트 Routes안에 edit루트에 id url을 지정해줬다

 

 

 

 

 

 

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

const Edit = () => {
    const [originData, setOriginData] = useState();
    const navigate = useNavigate();
    const { id } = useParams();
    const diaryList = useContext(DiaryStateContext);

    useEffect(() => {
        if (diaryList.length >= 1) {
            const targetDiary = diaryList.find(
                (it) => parseInt(it.id) === parseInt(id)
            );
            if (targetDiary) {
                setOriginData(targetDiary);
            } else {
                navigate('/', { replace: true })
            }
        }
    }, [id, diaryList]);
    return (
        <div>
            {originData && <DiaryEditor isEdit={true} originData={originData} />}
        </div>
    );
};

export default Edit;

Edit컴포넌트에 DiaryStateContext로 data를 전달받고 id를 통해 navigate를 지정해준다. 

useEffect()안에는 조건을 달아 id에 해당하는 url이 아닐시 홈화면으로, 그리고 없는 url로 뒤로가기도 막아주었다.

 

const DiaryEditor = ({ isEdit, originData }) => {
....

    useEffect(() => {
        if (isEdit) {
            setDate(getStringDate(new Date(parseInt(originData.date))));
            setEmotion(originData.emotion);
            setContent(originData.content);
        }
    }, [isEdit, originData])
 
 ...
 }

그다음에 다이어리 에디터 컴포넌트로 이동해서 isEdit,originData프롭을 주고 useEffect안에 isEdit, originData상태가 변할때 만 작동하는 조건문을 추가해주었다.

 

 

 

 

 

\

 

기존 데이터를 불러왔지만 아직 헤더는 새 일기쓰기라서 헤더도 수정해줄 것

 

 

 

 

 

헤더 및 하단 버튼 수정하기

            <MyHeader
                headText={onEdit ? "일기 수정하기" : "새 일기 쓰기"}
                leftChild={<MyButton text={"< 뒤로가기 "} onClick={() => navigate(-1)} />}
            />

 

DiaryDispatchContext로부터 Edit도 받을 수 있게 해주었다

    const { onCreate, onEdit } = useContext(DiaryDispatchContext);

 

 

그리고 버튼을 눌렀을때 수행할 handleSubmit 함수도 조건문을 추가해주었다.

        if (window.confirm(isEdit ? "일기를 수정하시겠습니까?" : "새로운 일기를 작성하시겠습니까?")) {
            if (!isEdit) {
                onCreate(date, content, emotion);
            } else {
                onEdit(originData.id, date, content, emotion)
            }
        };

 

 

 

 

 

수정완성

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 :

- 한 입 크기로 잘라먹는 리액트