[DukTown/React] 데이터 전송 후 새로고침

🧐 상황

외박신청란에서는 폼 작성 후 신청하기 -> 확인 순으로 버튼을 누르면 폼에 작성한 내용이 백엔드로 전달된다.

이때 성공적으로 전송이 된다면 성공이 됐다는 알림과 함께 화면이 새로고침이 되게 하고 싶었다.

 

useNavigate를 이용해 화면을 이동하니 같은 페이지로 이동하면 되지 않을까 싶었다.

fetch(apiUrl, request)
    .then((response) => {
        if (response.ok)
            return response;
        else
            throw new Error(response.errorMessage);
    })
    .then(() => {
        navigate('/stayout');
        setModalIsOpen(false);
        alert("외박 신청이 전송되었습니다.");
    })
    .catch((error) => {
        console.error(error.errorMessage);
        alert(error.errorMessage);
    });

 

 

그런데 이렇게 짜니 얼라리...

폼에 작성했던 내용이 그대로 남아있었다.

왼쪽이 전, 오른쪽이 후

 

👻 문제

찾아보니 useNavigate는 지정한 경로로 이동하는 것이지 페이지를 리로드 하지는 않는다고 한다.

새로고침 없이 리렌더링 하는 것이기 때문에 폼에 작성했던 정보가 그대로 남아있던 것이다.

useNavigate의 라우팅에 대한 부분은 추후 뜯어볼 예정이다.

 

 

💞 해결

그렇다면 해결 방법은 useNavigate를 쓰지 않고 javascript 코드로 새로고침을 시켜주면 되겠다고 생각했다.

`navagate('/stayout') 대신 window.location.reload()를 쓰기로 했다.

fetch(apiUrl, request)
    .then((response) => {
        if (response.ok)
            return response;
        else
            throw new Error(response.errorMessage);
    })
    .then(() => {
        window.location.reload();
        setModalIsOpen(false);
        alert("외박 신청이 전송되었습니다.");
    })
    .catch((error) => {
        console.error(error.errorMessage);
        alert(error.errorMessage);
    });

(적고보니 에러 났을 때 화면이 변하는 동작이 없다는 걸 알았다. 에러 발생 시 모달만 꺼서 화면에 변화를 줘야겠다.)

 

폼 제출 시 깨끗하게 비워지는 모습

의도했던 대로 잘 비워진다!