replaceState를 쓰지 않는 대안

Question

안녕하세요 강사님   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}) }; }

김정환 · Answer

올려주신 코드에서 어떤 동작을 기대하셨는지 조금 더 설명해주실 수 있을까요? replaceState 를 사용하지 않고 event.currentTarget.document.location.pathname 을 활용하는 방식이 정상적으로 작동하는 것처럼 보이지만, 일부 상황에서 의도치 않은 동작이 발생할 수 있을 것 같습니다. 예를 들어, pushState 로 새로운 경로를 추가하면 브라우저의 주소는 변경되지만, popstate 이벤트가 발생할 때 event.state 값이 비어 있을 수 있습니다. replaceState 를 활용하면 초기 상태를 명확하게 설정할 수 있어 이러한 문제를 방지할 수 있습니다. 혹시 특정한 이유로 replaceState 없이 해결하고 싶으신 걸까요? 기대하신 동작과 현재 발생하는 문제를 조금 더 설명해주시면 도움이 될 것 같아요.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이재은님. 리액트에서 replaceState 와 관련된 질문에 대해 주셨군요. replaceState 를 사용하지 않고 event.currentTarget.document.location.pathname 를 사용하여 상태를 갱신하는 방법은 동작할 수 있지만, 몇 가지 고려 사항이 있습니다. React의 상태 관리 : 리액트는 상태 관리에 최적화되어 있으며, 상태를 변경할 때 React의 setState 를 통해 변경하는 것이 가장 바람직합니다. 직접 브라우저의 위치를 사용하여 상태를 변경하면 React의 생명주기와 동기화되지 않을 수 있습니다. pushState와 popState 이벤트 : pushState 는 역사 스택의 새 항목을 추가하는 반면 replaceState 는 현재 항목을 대체합니다. popState 이벤트는 브라우저의 뒤로 가기/앞으로 가기 버튼을 사용할 때 발생합니다. replaceState 를 사용하지 않게 되면 예상치 못한 경로 문제나 초기화 문제를 마주할 수 있습니다. 적절성 : 현재 주소 경로를 사용하여 상태를 설정하는 것은 특정 상황에서는 괜찮을 수 있지만, 이 방법이 React의 기본 철학과는 약간 맞지 않다는 점입니다. React는 UI 업데이트를 선언적으로 다루는 것을 선호합니다. 아래 링크에서 유사한 질문과 답변을 참조할 수 있습니다: - 리액트에서 pushState와 popState 사용법 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.