React) 뒤로 가기 막기, 현재 질문에서 이전 질문으로

문제)

Component 간의 화면 전환을 원하지 않아서, 뒤로가기를 막고싶다.

 

원하는 동작	현재 동작
2번 질문에서 뒤로가기 => 1번 질문	2번 질문에서 뒤로가기 => 시작화면

 

현재 동작)

2번에서 뒤로가기 하면 시작으로 가버린다.

 

 

 

 

뒤로가기 이동 원리)

'history State' 에 현재까지 이동해온 페이지 정보가 Stack으로 담겨있다.

그때, 뒤로가기가 발생하면 stack에 가장 위의 있는 페이지로 이동하게 된다.

 

 

문제 해결 방법)

1. 뒤로가기를 막는다. 

history.pushState(null,"",window.location.href);  사용

 

위의 코드를 통해서 지금까지 이동해온 페이지가 담긴 history에 현재 페이지를 최상위에 넣어두고 

뒤로가기 발생 시 history 중 다시 한 번 현재페이지가 나오도록 한다.

 

=> 현재 페이지가 History State에 '최상위'라서 현재 페이지가 나온다.

 

( ** 여기까지만 하고 나면 뒤로가기만 막았기 때문에 뒤로가기를 눌러도 아무 동작이 일어나지 않는다.

그래서 뒤로가기를 눌렀을 때 원하는 동작을 설정해보자. )

 

2. 뒤로가기를 하면 이전 질문으로 돌아가도록 한다.

=> window.addEventListener("popstate", 함수)

인자로 넣어줄 함수에 원하는 동작을 넣어주면 된다.

 

(나는 현재 1번 질문이라면 시작 화면으로 가도록 하고, 그 외의 질문이라면 바로 이전 질문으로 가도록 했다.)

 

 

Code)

1. useEffect를 사용해서 questionNumber가 변경될 때 마다, [뒤로가기 막기] history State에 현재 페이지를 넣는다.

 

2. 뒤로가기를 누르면 직접 정의해둔 [이전 질문 돌아가기] handleGoBack 함수가 동작하도록 한다.

    const handleGoBack = ()=>{
        setSelectedOption('');
        deleteAnswer();
        if(questionNumber > 1){
            setQuestionNumber((questionNumber) => (questionNumber-1));
        }else{
            navigate(-1);
        }
    }

    useEffect(()=>{
        history.pushState(null,"",window.location.href);

        window.addEventListener("popstate",handleGoBack);

        return ()=>{
            window.removeEventListener("popstate",handleGoBack);
        }
    },[questionNumber]);

 

결과)

2번에서 뒤로가기를 하면 1번으로 간다.