리액트에서 새로고침을 해야 함수가 작동하는 경우

리액트

문제

webstomp-client라는 라이브러리를 이용중인데

Opening Web Socket...

위 콘솔만 찍히고, 소켓에 연결이 안되는 버그가 있었습니다. 그런데, 새로고침 이후에는 제대로 연결이 되었습니다.

해결

여러 삽질을 한 결과, react-router-dom의 <Route ... />의 props인 history를 이용한 코드가 문제였습니다.

history.push("/");

react-router-dom의 경우 SPA(Single Page Application)에서 CSR(Client Side Routing)을 구현하기위한 라이브러리이기 때문에 history.push("/")를 이용해 url이 변경된 것처럼 보이지만, 실제로는 변경되지 않은 상태입니다. 따라서 실제로 url을 변경하기 위해서, 여기에서는 아래의 코드를 통해 CSR을 사용하지 않고 url을 변경해야합니다.

window.location.replace("/")