230728 개발일지 TIL - React Redux 페이지 리다이렉션의 중요성(수정 페이지에서 리다이렉션을 누락하는 경우 발생하는 문제)

React Redux 페이지 리다이렉션의 중요성
[수정 페이지에서 리다이렉션을 누락하는 경우 발생하는 문제]

문제발생

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import useInput from "../api/useInput";
import { switchTodo } from "../redux/modules/todos";

const Edit = () => {

  const handleEditedTodoSubmit = (e) => {
    e.preventDefault();

    if (!editedTitle || !editedBody) {
      return alert("수정할 내용을 입력해주세요!");
    }

    if (editedTodo) {
      const updatedTodo = {
        id,
        title: editedTitle,
        body: editedBody,
      };
      dispatch(switchTodo(updatedTodo));
      // navigate("/") 누락
    }
    return false;
  };
};

handleEditedTodoSubmit 함수에서 navigate("/")를 누락했다.
Edit페이지에서 제목,내용을 작성 후 수정완료하기 버튼을 클릭한 후 console.log로 확인했을시 todo 아이템이 업데이트 된 것을 확인 할 수 있었는데 Edit페이지에 머무는 현상이 있었다.

해결 방법
handleEditedTodoSubmit 함수에서 dispatch와 navigate("/")를 호출하여 수정을 완료한 후에 메인페이지로 리다이렉션되도록 해주어야 한다.
누락된 navigate("/")를 추가하고 수정을 완료하게 되면 메인페이지로 이동하게 되며 수정된 todo 아이템을 확인 할 수 있다.

느낀 점
Edit페이지에서 수정완료버튼을 클릭한 후 브라우저의 뒤로가기 버튼을 클릭해야 메인페이지에 추가된 todo 아이템 부분이 보였는데 navigate("/")를 추가함으로서 사용자 경험에 대한 중요성도 깨닫게 되었다.