nav('/', { replace: true }); 뒤로가기 방지

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

해결된 질문

작성

import Header from '../components/Header';
import Button from '../components/Button';
import Editor from '../components/Editor';
import { useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import { DiaryDispatchContext } from '../App';

const New = () => {
    const nav = useNavigate();
    const { onCreate } = useContext(DiaryDispatchContext);

    const onSubmit = (input) => {
        onCreate(input.createdDate.getTime(), input.emotionId, input.content);
        nav('/', { replace: true });
    };
    return (
        <div>
            <Header
                title={'새 일기 쓰기'}
                leftChild={
                    <Button
                        text={'< 뒤로 가기'}
                        onClick={() => {
                            nav(-1);
                        }}
                    />
                }
            />
            <Editor onSubmit={onSubmit} />
        </div>
    );
};

export default New;

여기서 nav('/', {replace:true});로 뒤로가기(New 페이지로 가는 것)를 방지했는데,

뒤로가기를 한 번 눌렀을 때는 잘 동작하는데

두 번 눌렀을 때부터 뒤로 가집니다.

혹시 원래 이런건가요? 아니면 제가 뭔가 잘못한건가요?

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

우선 nav('/', { replace: true })는 현재 페이지를 다른 페이지로 대체하기 때문에 페이지 이동시 이전 페이지를 브라우저 스택에 저장하지 않습니다. 따라서 한번 뒤로가기 버튼을 눌러도 이전 페이지로 돌아가지지 않죠 그러나 그 후 두 번째, 세 번째로 뒤로 가기 버튼을 누를 때 브라우저 스택에 저장된 다른 이전 페이지로 이동하게 됩니다.

쉽게 정리해 말씀드리자면 1->2->3 순으로 페이지를 이동한다고 가정할 때, 2->3 이동시 replace: true 옵션을 적용했다면, 브라우저 스택에는 1->3 으로 기록될 것입니다. 이때 뒤로가기 한번으로는 아무 페이지로도 이동하지 않지만 두번 연속으로 뒤로가기를 누를 경우 1번 페이지로 이동하게 되는 것 입니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

nav('/', { replace: true });를 사용하여 뒤로 가기를 방지하는 것은, 현재 페이지를 기록하지 않고 새로운 페이지로 이동시키는 기능을 하기 때문에 뒤로 가기를 누르면 이전 페이지로 돌아가는 것이 불가능하게 하기 위한 방법입니다.

하지만, 두 번 누르면 여전히 이전 페이지로 이동하는 문제를 겪고 계신다면, 이는 브라우저의 캐시 문제이거나, 이전 페이지 상태를 관리하는 로직에 문제가 있을 수 있습니다. 몇 가지 확인하고 조정해볼 수 있는 방법은 다음과 같습니다.

브라우저 캐시 확인: 브라우저의 뒤로가기 버튼을 누를 때의 작동 방식이 사용하는 브라우저의 설정에 따라 다를 수 있습니다. 설정에서 캐시 데이터를 삭제하거나, 시크릿 모드에서 시도해 보세요.
이전 페이지 기록 확인: replace: true가 현재 페이지를 기록하지 않고 교체한다는 것을 확인했으므로, 새로운 상태가 추가되지 않도록 보장되어야 합니다. 혹시 다른 navigate 작업이 추가적으로 있는지 코드 흐름을 확인하세요.
라우팅 검사: 일반적으로 브라우저의 뒤로가기 브라우저 상태를 조작하는 것 외에도, 특정 페이지에서의 전역 상태 혹은 라우팅 정책에 따라 영향을 받습니다. 해당 페이지에 대한 다른 이동 로직이 있는지 확인합니다.

관련된 비슷한 문제가 발생한 사례를 참고하시려면 여기를 클릭하세요. 위 질문에서는 /{replace:true}의 동작 방식을 설명하고 있으니 더욱 이해가 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

nav('/', { replace: true }); 뒤로가기 방지