일반적으로 Onclick 인 경우에 페이지 이동할 때에는
아래와 같이 컴포넌트의 return에서 Link를 사용하여 쉽게 사용이 가능했다.
return (
<Link className="SubmitButton" as={Link} to="/Submit" onClick={scrollToTop}>
[버튼내용]
</Link>
);
이번에 작업하면서 어려움을 겪었던 부분은
Submit에 성공 할 때에 다른 페이지를 이동 해야하는 경우였다.
처음에는 React 함수의 return 내에서 조건을 걸어 해결하려 했다.
var isSubmit = false;
function TextInput() {
var getName = document
.getElementById("name")
.value;
var Department = document
.getElementById("Department")
.value;
var studentid = document
.getElementById("studentid")
.value;
var grade = document
.getElementById("grade")
.value;
var phone = document
.getElementById("phone")
.value;
var email = document
.getElementById("email")
.value;
var content = document
.getElementById("content")
.value;
axios
.post(
"통신하는 API 주소",
{
name: getName,
Department: Department,
studentid: studentid,
grade: grade,
phone: phone,
email: email,
content: content
}
)
.then(function (response) {
console.log(response);
alert(`제출이 완료되었습니다`);
isSubmit = true;
})
.catch(function (error) {
console.log(error);
alert(`입력 값을 다시 확인해주세요`);
isSubmit = false;
});
.
.
.
function 함수명() {
return (
{isSubmit === true && <Navigate to="/Submit/SubmitComplete"/>}
.
.
.
제출 되었는지 여부를 판단하는 변수 isSubmit이 Ture 일 경우 Navigate 를 반환하는 방식으로 코드를 작성하였다.
페이지 내에서 Submit을 하더라도 이미 렌더링 된 페이지에서 isSubmit 변수가 Ture 가 됐더라도 반영을 하지 않는 것으로 생각하여 페이지 강제 렌더링을 시도했지만, 실패했다.
리액트 함수의 return 에서 조건을 거는 것이 아닌, JS 함수에서 조건을 걸어봤다.
function GoComplete() {
setTimeout(function () {
if (isSubmit === true) {
window.location.href = "/likelionpage-front/Submit/SubmitComplete/";
}
}, 3000);
}
.
.
.
<button
type="button"
className="post PostButton"
onClick={() => {
TextInput();
GoComplete();
}}>
제출하기
</button>
.
.
.
로컬호스트에서는 API에 POST가 성공했을 때 화면이동에 성공하였지만, Router를 이용하는 SPA 환경에서는 실패하였다.
.
.
.
var isSubmit = false;
function TextInput() {
.
.
.
.then(function (response) {
console.log(response);
alert(`제출이 완료되었습니다`);
isSubmit = true;
})
.catch(function (error) {
console.log(error);
alert(`입력 값을 다시 확인해주세요`);
isSubmit = false;
});
}
function GoComplete(navigate) {
setTimeout(function () {
if (isSubmit === true) {
navigate("/Submit/SubmitComplete/");
}
}, 2000);
}
function Submit() {
const navigate = useNavigate();
console.log(navigate);
return (
.
.
.
<button
type="button"
className="post PostButton"
onClick={() => {
TextInput();
GoComplete(navigate);
}}>
제출하기
</button>
.
.
.
Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다.
React Hook Rule 을 지키기 위해 React 함수인 Submit 함수의 선언하였고,
GoComplete 라는 JS 함수에 navigate 값을 인자로 주어서 사용하였다.
SPA 환경에서 정상 작동이 됨을 확인하였다.