해결된 질문
작성
·
56
1
안녕하세요 강사님
pushState를 작성하고 popState를 쓰는 부분에 있어서 에러가 발생했는데 이는 replaceState를 안써서 초기 상태에 대한 정보가 없어서 그렇다고 이해했습니다.
그런데, replaceState를 안쓰고 event.currentTarget.document.location.pathname 속성을 써도 정상적으로 작동하는듯한데 이 방식은 적절하지 않다고 보시나요?
handleChangePath(path){
this.setState({path})
window.history.pushState({}, "", path)
onpopstate = (event) => {
console.log(this.state.path)
this.setState({path : event.currentTarget.document.location.pathname})
};
}
답변 2
0
올려주신 코드에서 어떤 동작을 기대하셨는지 조금 더 설명해주실 수 있을까요?
replaceState
를 사용하지 않고 event.currentTarget.document.location.pathname
을 활용하는 방식이 정상적으로 작동하는 것처럼 보이지만, 일부 상황에서 의도치 않은 동작이 발생할 수 있을 것 같습니다.
예를 들어, pushState
로 새로운 경로를 추가하면 브라우저의 주소는 변경되지만, popstate
이벤트가 발생할 때 event.state
값이 비어 있을 수 있습니다. replaceState
를 활용하면 초기 상태를 명확하게 설정할 수 있어 이러한 문제를 방지할 수 있습니다.
혹시 특정한 이유로 replaceState
없이 해결하고 싶으신 걸까요? 기대하신 동작과 현재 발생하는 문제를 조금 더 설명해주시면 도움이 될 것 같아요.
0
안녕하세요, 인프런 AI 인턴입니다. 이재은님.
리액트에서 replaceState
와 관련된 질문에 대해 주셨군요. replaceState
를 사용하지 않고 event.currentTarget.document.location.pathname
를 사용하여 상태를 갱신하는 방법은 동작할 수 있지만, 몇 가지 고려 사항이 있습니다.
React의 상태 관리: 리액트는 상태 관리에 최적화되어 있으며, 상태를 변경할 때 React의 setState
를 통해 변경하는 것이 가장 바람직합니다. 직접 브라우저의 위치를 사용하여 상태를 변경하면 React의 생명주기와 동기화되지 않을 수 있습니다.
pushState와 popState 이벤트: pushState
는 역사 스택의 새 항목을 추가하는 반면 replaceState
는 현재 항목을 대체합니다. popState
이벤트는 브라우저의 뒤로 가기/앞으로 가기 버튼을 사용할 때 발생합니다. replaceState
를 사용하지 않게 되면 예상치 못한 경로 문제나 초기화 문제를 마주할 수 있습니다.
적절성: 현재 주소 경로를 사용하여 상태를 설정하는 것은 특정 상황에서는 괜찮을 수 있지만, 이 방법이 React의 기본 철학과는 약간 맞지 않다는 점입니다. React는 UI 업데이트를 선언적으로 다루는 것을 선호합니다.
아래 링크에서 유사한 질문과 답변을 참조할 수 있습니다:
- 리액트에서 pushState와 popState 사용법
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아 굳이 replaceState를 안쓰고 싶었던 것은 아니고..! 단순히 제가 실습을 진행할 때 replaceState 메서드를 떠올리지 못해 브라우저 콘솔로 이것저것 뒤적이다가 event.currentTarget.document.location.pathname을 쓰면 되겠다는 아이디어가 떠올라서 질문을 드렸습니다. 뒤로 가기와 앞으로 가기 모두 replaceState 없이도 잘 동작하는듯해서 이런 방식도 문제 없지 않나 라는 질문입니다