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

pushState는 브라우져의 히스토리 상태만 변경합니다. 리액트 컴포넌트는 이 상태와 전혀 상관없는 객체이고요. 그렇기 때문에 별도의 리액트 상태(path)를 두었는데요. 이를 변경해 리액트 컴포넌트가 다시 그려지도록(리렌더) 의도한 것입니다.

정리하면,

• pushState: 히스토리 상태 변경

• setState: 리액트 컴포넌트 상태 변경 → 리렌더 유발

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

리액트와 관련해서 pushState와 popstate 이벤트에 대한 질문을 주셨군요. 이 두 개념은 브라우저의 히스토리 API와 관련이 있으며, React와 함께 사용할 때 약간의 차이점이 존재합니다.

1. pushState:

   • pushState는 브라우저 히스토리 스택에 새로운 상태를 추가하거나 URL을 업데이트합니다. 그러나, 이는 브라우저의 주소 표시줄(URL)만 변경할 뿐이고, 실제로 페이지를 리렌더링하지는 않습니다. 이는 사용자가 페이지를 탐색하는 동안 히스토리 스택을 수동으로 조작할 수 있는 메커니즘을 제공하기 때문입니다.
     
   • 이와 관련하여, React 애플리케이션의 경우, URL 변경에 따른 적절한 렌더링을 수행하려면 자신의 라우팅 로직(예: React Router)을 사용하도록 설정해야 합니다.
     

2. popstate 이벤트:

   • popstate 이벤트는 사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 클릭할 때 발생합니다. 이 이벤트는 히스토리 스택의 상태가 변경되었음을 나타내며, 애플리케이션에서 해당 변경에 대응하여 필요한 리렌더링이나 상태 변경을 처리할 수 있게 합니다.
     
   • 따라서, popstate 이벤트는 기존 상태로 전환될 때 필요한 리렌더링을 트리거할 필요가 있을 수 있으며, 이는 종종 라우터 설정 내에서 수행됩니다.
     

관련된 질문과 답변을 다음 URL에서 확인하실 수 있습니다:
- React - Router 활용하여 URL과 상태 관리하기

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