[질문] react 새로고침

[mingki831]

react 새로고침

로그인 했고 주소가 있는 사용자면, 주소를 추출해서 위치 내에 있는 채팅방이 검색됩니다. 하지만 그 상태에서 새로고침을 누르면 주소를 가져오기 전에 화면이 그려져서 결국 주소가 없는 사용자의 검색으로 결과가 나옵니다.

이 문제를 위해 해결방안을 찾아보고 있는데,,, 보통 local storage에 담거나 react persist라는 라이브러리를 사용하더라구요. 근데 그런 방법으로 해결하기에는 너무 무겁게 해결하는 것 같고, 충분히 react로 해결할 수 있을 것 같아서 문법 고수님들에게 도움을 요청합니다.

제 thunkHandler 구요..! 해결할 길만 알려주시면 제가 잘 적용해보겠습니다.

[JMKiim]

결국 새로고침에 의해서 휘발 된 사용자 정보가 다시 불려오기 전에 get요청을 보내서 일어나는 문제입니다. 가장 먼저 떠오르는 방법은 Effect hook의 의존성 배열에 user의 address를 넣어서 address가 바뀔 때 마다 get요청을 보내게 하는 것입니다.

하지만 그렇게 되면 새로고침을 하는 순간 get요청, 그리고 유저 주소 정보가 돌아오는 순간 또 다시 get요청을 보내기때문에 불필요한 요청이 발생하고, 또한 사용자 입장에서는 갑자기 화면이 바뀌는 불편한 경험을 할 수 있겠네요.

그렇다면 조금만 기다리면 주소가 돌아올 가능성이 있는 경우에는 조금 후에 요청을 보낼 수 있도록 처리를 해볼 수 있고, 해당 가능성의 여부는 refresh token으로 검사할 수 있을 것 같습니다.

위와 같이 작성해서 콘솔 찍히는걸 확인해보면 될것같아요.

handler변수의 선언과 초기화 사이의 간격이 신경쓰인다면

다시 돌아올 가능성이 있는 경우 뿐만 아니라 모든 경우를 handler로 감싸주면 될 것 같습니다.