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

반응형

리액트

문제

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("/")

반응형

저작자표시

'Web > React' 카테고리의 다른 글

직접 제작한 리액트-타입스크립트-보일러플레이트 소개  (0)	2020.03.15
리액트에서 새로고침을 해야 함수가 작동하는 경우  (1)	2020.03.02
[⚛React] React Element, React Component 그리고 JSX  (0)	2020.01.19
[⚛React] 🐶 이모지를 이용한 빙고게임 만들기  (1)	2019.01.31
[⚛React] React 기본 개념  (0)	2018.12.26
React로 WYSIWYG 에디터 뭘로 시작하지?  (4)	2018.12.20