react에 웹소켓 적용시 어느 영역에 하느냐의 문제

웹소켓에 대해 아무것도 모르고 무작정 도입하려고 공부하면서 코드를 끄적이던 중 

 

한 가지 큰 문제가 생겼다.

 

문제 발생

웹소켓에 필요한 컴포넌트 마다 연결할 경우

 

pc, 네트워크 환경에 따라 웹소켓 연결속도가 달라

 

누군 바로 되지만 어떤 사람은 소켓 기능을 사용하기 위해서

 

연결될 때 까지 기다려야 하는 수고스러움이 있다.

 

해결 방안

그래서 나는 맨처음에 우리 메인 홈페이지에 들어올 때 연결 시켜두고

 

어차피 NAV로 통해 이동되는 게시판은 리다이렉션형태로 이동되기 때문에 소켓이 계속 유지된다.

(새로고침 하거나 주소창으로 이동하는 경우 재연결함)

 

그래서 처음부터 연결시켜두기 위해 웹소켓이 필요한 컴포넌트 영역이 아닌 전체 영역으로 하고

 

웹소켓만 관리하는 별도 컴포넌트를 만들어 Context를 이용해 props로 소통하기로 했다.

 

어떻게 구현했는지에 대한 내용은 

https://fuckingjava.tistory.com/159

react, SpringBoot WebSocket 연결하기 (1/5)