크게 중요하지 않은 의존성과 쓰이지 않는 변수에 대한 리팩토링

 import React, { useCallback, useContext } from 'react';
 import React, { useCallback, useContext } from 'react';
-import { IndexType } from 'typescript';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 
 
@@ -24,7 +23,7 @@ export const Word: React.FC<WordProps> = (props) => {
         props.setWordChosen(props.word);
         props.setWordChosen(props.word);
       }
       }
     });
     });
-  }, [props.setWordChosen]);
+  }, [props.word, props.setWords, props.setWordChosen]);
 
 
   return (
   return (
     <button className={`bg-green-500 active:bg-green-600 fixed
     <button className={`bg-green-500 active:bg-green-600 fixed

@@ -3,7 +3,6 @@ import { useHistory, useLocation } from 'react-router-dom';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { RoomData } from '../room/types';
 import { RoomData } from '../room/types';
-import { Room } from './types';
 
 
 interface CreateLocation {
 interface CreateLocation {
   state: { username: string }
   state: { username: string }
@@ -33,7 +32,7 @@ export const Create: React.FC = () => {
         console.log('방 생성 오류');
         console.log('방 생성 오류');
       }
       }
     });
     });
-  }, [roomName]);
+  }, [roomName, location.state.username]);
   
   
   return (
   return (
     <div className="flex items-center">
     <div className="flex items-center">

@@ -40,7 +40,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
     } else {
     } else {
       //TODO: 자리 꽉찼다는 MODAL
       //TODO: 자리 꽉찼다는 MODAL
     }
     }
-  }, []);
+  }, [location.state.username, room]);
 
 
   return (
   return (
     <button className={`flex items-center place-content-between m-2 w-5/6 
     <button className={`flex items-center place-content-between m-2 w-5/6 

@@ -29,7 +29,7 @@ export const Login: React.FC = () => {
     return (
     return (
       <Main>
       <Main>
         <div className="mt-auto flex flex-col items-center">
         <div className="mt-auto flex flex-col items-center">
-          <img className="m-7" src="./logo192.png"/>
+          <img className="m-7" src="./logo192.png" alt='logo img' />
           <div>
           <div>
             <input type="text"
             <input type="text"
                 placeholder="Username"
                 placeholder="Username"

@@ -2,7 +2,6 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router';
 import { useHistory, useLocation } from 'react-router';
 import { Main } from '../components/common/Main';
 import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
-import { Canvas } from '../components/room/Canvas';
 import { Chat } from '../components/room/Chat';
 import { Chat } from '../components/room/Chat';
 import { GameBoard } from '../components/room/GameBoard';
 import { GameBoard } from '../components/room/GameBoard';
 import { Ready } from '../components/room/Ready';
 import { Ready } from '../components/room/Ready';
@@ -10,7 +9,6 @@ import { RoomInfo } from '../components/room/RoomInfo';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
 import { UserInfo } from '../components/room/UserInfo';
 import { UserInfo } from '../components/room/UserInfo';
 import { UserRole } from '../components/room/UserRole';
 import { UserRole } from '../components/room/UserRole';
-import { UserStatus } from '../components/room/UserStatus';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
 interface RoomLocation {
 interface RoomLocation {
@@ -40,9 +38,9 @@ export const Room: React.FC = () => {
   }, []);
   }, []);
 
 
   const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
   const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
-    if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
+    if (rawMessage.type === MessageType.ROOM_USER_UPDATE) {
       const data = rawMessage.message as UpdateRoomUser;
       const data = rawMessage.message as UpdateRoomUser;
-      if (data.state == 'removed') {
+      if (data.state === 'removed') {
         const newUsers = roomData.users;
         const newUsers = roomData.users;
         const index = newUsers.findIndex(x => x.username === data.user.username);
         const index = newUsers.findIndex(x => x.username === data.user.username);
         if (index < 0) {
         if (index < 0) {
@@ -81,7 +79,7 @@ export const Room: React.FC = () => {
     return () => {
     return () => {
       socket.off('msg', handleUpdateRoomUser);
       socket.off('msg', handleUpdateRoomUser);
     }
     }
-  }, [roomData]);
+  }, [handleUpdateRoomUser]);
 
 
   useEffect(() => {
   useEffect(() => {
     // 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
     // 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
@@ -102,7 +100,7 @@ export const Room: React.FC = () => {
       }
       }
       socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
       socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
     }
     }
-  }, [])
+  }, [location.state]);
   
   
   return (
   return (
     <Main>
     <Main>