웹소켓 cleanup 적용

src/components/websocket/WebsocketClient.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { VscLoading } from 'react-icons/vsc';
 import { useDispatch, useSelector } from 'react-redux';
 import { WS_HOST } from '../../configs/constants';
@@ -9,27 +9,31 @@ const WebsocketClient = () => {
   const reConnectionTime = 5000; //5초
 
   const [isConnection, setIsConnection] = useState(false);
+  const websocket = useRef(null);
 
   useEffect(() => {
     connect();
+    return () => {
+      websocket.current.close();
+    };
   }, []);
 
   const connect = () => {
-    let websocket = new WebSocket(WS_HOST);
+    websocket.current = new WebSocket(WS_HOST);
 
-    websocket.onopen = () => {
+    websocket.current.onopen = () => {
       setIsConnection(true);
       console.log('[Websocket Open] Connection Open');
     };
 
-    websocket.onmessage = e => {
+    websocket.current.onmessage = e => {
       const data = e.data;
       const controlGpList = JSON.parse(data);
 
       dispatch(Actions.controlGpAction.request(controlGpList));
     };
 
-    websocket.onclose = event => {
+    websocket.current.onclose = event => {
       setIsConnection(false);
       setTimeout(function () {
         connect();