From 3c9772c20f776d933ba237475c60cd25677771e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?=
 <kimjh2369@gmail.com>
Date: Fri, 21 Oct 2022 15:05:06 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9B=B9=EC=86=8C=EC=BC=93=20cleanup=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/websocket/WebsocketClient.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/websocket/WebsocketClient.js b/src/components/websocket/WebsocketClient.js
index 0da8a2c0..7bfb2bc2 100644
--- a/src/components/websocket/WebsocketClient.js
+++ b/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();