리액트 훅의 dependency 해소

@@ -4,7 +4,7 @@ import SocketContext from '../../contexts/SocketContext';
 import { MessageType, RawMessage } from '../common/types';
 import { Canvas } from './Canvas';
 import { RoundInfo } from './RoundInfo';
-import { Role, RoundData } from './types';
+import { RoundData } from './types';
 import { Word } from './Word';
 
 interface GameBoardLocation {
@@ -37,8 +37,8 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
       setWords([]);
 
       const data = rawMessage.message as RoundData;
-      console.log('테스트 location ', location.state.username);
-      console.log('테스트 rolse ', data.roles);
+      // console.log(location.state.username);
+      // console.log(data.roles);
       const index = data.roles.findIndex(x => x.username === location.state.username);
       setIsDrawer(data.roles[index].role === 'drawer');
       setWordChosen('');
@@ -64,18 +64,24 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
 
   useEffect(() => {
     socket.on('msg', handleStart);
-    socket.on('msg', handleGetWordLength);
     socket.on('msg', handleWordSet);
     socket.on('msg', handleAnswer);
 
     return () => {
       socket.off('msg', handleStart);
-      socket.off('msg', handleGetWordLength);
       socket.off('msg', handleWordSet);
       socket.off('msg', handleAnswer);
     }
   }, []);
 
+  useEffect(() => {
+    socket.on('msg', handleGetWordLength);
+    
+    return () => {
+      socket.off('msg', handleGetWordLength);
+    }
+  }, [wordChosen]);
+
   return (
     <div className={`w-auto ${isInGame ? '' : 'hidden'}`}>
       <div className='w-full flex flex-col justify-center items-center'>

@@ -28,7 +28,7 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => {
     var test = users.length > 1;
     users.forEach(x => test = test && (x.ready || x.admin));
     setIsAllReady(test);
-  });
+  }, [users, location.state.username]);
 
   const handleReady = useCallback(() => {
     if (isAdmin && isAllReady) {