React - SPA 에서 특정 조건일 때 페이지 이동하기 useNavigate

조우진·2023년 2월 6일
0

React

목록 보기
1/3

일반적으로 Onclick 인 경우에 페이지 이동할 때에는
아래와 같이 컴포넌트의 return에서 Link를 사용하여 쉽게 사용이 가능했다.

    return (
        <Link className="SubmitButton" as={Link} to="/Submit" onClick={scrollToTop}>
          [버튼내용]
        </Link>
    );

이번에 작업하면서 어려움을 겪었던 부분은
Submit에 성공 할 때에 다른 페이지를 이동 해야하는 경우였다.

실패 1

처음에는 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 가 됐더라도 반영을 하지 않는 것으로 생각하여 페이지 강제 렌더링을 시도했지만, 실패했다.

실패 2

리액트 함수의 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 환경에서 정상 작동이 됨을 확인하였다.

profile
개발자가 되고 싶다!

0개의 댓글