인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

이재은님의 프로필 이미지

작성한 질문수

[리액트 2부] 고급 주제와 훅

[2.3장 라우터 2] 2.3.3 뒤/앞으로 가기(풀이)

replaceState를 쓰지 않는 대안

해결된 질문

작성

·

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 없이 해결하고 싶으신 걸까요? 기대하신 동작과 현재 발생하는 문제를 조금 더 설명해주시면 도움이 될 것 같아요.

이재은님의 프로필 이미지
이재은
질문자

아 굳이 replaceState를 안쓰고 싶었던 것은 아니고..! 단순히 제가 실습을 진행할 때 replaceState 메서드를 떠올리지 못해 브라우저 콘솔로 이것저것 뒤적이다가 event.currentTarget.document.location.pathname을 쓰면 되겠다는 아이디어가 떠올라서 질문을 드렸습니다. 뒤로 가기와 앞으로 가기 모두 replaceState 없이도 잘 동작하는듯해서 이런 방식도 문제 없지 않나 라는 질문입니다

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 이재은님.

리액트에서 replaceState와 관련된 질문에 대해 주셨군요. replaceState를 사용하지 않고 event.currentTarget.document.location.pathname를 사용하여 상태를 갱신하는 방법은 동작할 수 있지만, 몇 가지 고려 사항이 있습니다.

  1. React의 상태 관리: 리액트는 상태 관리에 최적화되어 있으며, 상태를 변경할 때 React의 setState를 통해 변경하는 것이 가장 바람직합니다. 직접 브라우저의 위치를 사용하여 상태를 변경하면 React의 생명주기와 동기화되지 않을 수 있습니다.

  2. pushState와 popState 이벤트: pushState는 역사 스택의 새 항목을 추가하는 반면 replaceState는 현재 항목을 대체합니다. popState 이벤트는 브라우저의 뒤로 가기/앞으로 가기 버튼을 사용할 때 발생합니다. replaceState를 사용하지 않게 되면 예상치 못한 경로 문제나 초기화 문제를 마주할 수 있습니다.

  3. 적절성: 현재 주소 경로를 사용하여 상태를 설정하는 것은 특정 상황에서는 괜찮을 수 있지만, 이 방법이 React의 기본 철학과는 약간 맞지 않다는 점입니다. React는 UI 업데이트를 선언적으로 다루는 것을 선호합니다.

아래 링크에서 유사한 질문과 답변을 참조할 수 있습니다:
- 리액트에서 pushState와 popState 사용법

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