인프런 커뮤니티 질문&답변
작성한 질문수
40분 30초경 navigate 질문 있습니다
해결된 질문
작성
·
189
0
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨
질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)
질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
navigate('/',{replace:True})가 일기 작성하는 페이지로 뒤로 가기를 해서 못오게 막는다는 말이 무슨 말인지 이해가 안갑니다
답변 2
1
안녕하세요 이정환입니다. 순서대로 차근차근 설명해드릴게요!
우선 navigate 함수를 호출하면 인수로 전달한 경로로 페이지를 이동시킵니다. 그러면 브라우저는 페이지 이동을 감지해, 이전 페이지를 스택에 보관합니다. 만약 스택에 대해 잘 모르신다면 "이전 페이지(이동하기 전의 페이지) 위치를 기록해둔다" 라고 생각하시면 됩니다. 따라서 사용자가 뒤로가기를 누르게 되면 이전 페이지로 이동하게 됩니다. 여기까지는 기본적인 브라우저의 동작방식과 같습니다.
그런데 어떤 페이지는 페이지가 변경 되었을 때 뒤로가기를 방지해야 하는 경우가 있습니다. 예를 들면 로그인 페이지가 그렇습니다. 대다수의 웹사이트에서는 로그인 페이지에서 사용자가 id, password를 입력해 로그인하면 메인페이지로 이동시킵니다. 그런데 이때 사용자가 브라우저의 뒤로가기 버튼을 눌러 다시 로그인 페이지로 돌아갈 수 있다면 이것은 매우 부자연스럽습니다. 만약 이렇게 동작한다면 이 때에는 로그인이 해제되어야 하는걸까요? 아니면 유지되어야 하는 걸까요? 만약 유지되어야 한다면 새롭게 로그인이 가능해도 되는걸까요?
따라서 예시로 든 로그인 페이지 처럼 페이지가 변경되었을 때 뒤로가기를 방지해야 하는 경우 navigate 함수에 두번째 인수로 { replace: true }를 전달해주시면 됩니다. 이렇게 되면 브라우저는 이동하기 전의 페이지를 스택에 보관하지 않습니다 다른말로 하면 기록하지 않습니다. 따라서 사용자가 브라우저의 뒤로가기 버튼을 누르더라도 이전의 페이지로 돌아갈 수 없게 됩니다.
우리 감정 일기장 프로젝트에서는 새로운 일기를 쓰는 /new 페이지에서 이 기능을 활용합니다. /new 페이지에서는 사용자가 새로운 일기를 입력하고 "작성완료" 버튼을 누르면 메인 페이지로 이동시키는데 이때 뒤로가기를 허용할 경우 동작이 부자연스럽기 때문입니다. 만약 이것을 허용한다면 사용자는 새로운 일기를 쓰고 뒤로가기를 눌러 또 한번 새로운 일기를 작성할 수 있게 되는데 대부분의 사이트에서는 이런 부자연스러운 동작을 허용하지 않습니다.
그럼에도 혼란스러운 부분이 있으시다면 꼭 답글 남겨주세요 😃
이해가 잘 되셨다면 답글이나 체크도 부탁드립니다.
감사합니다 이정환 드림
0
