Fix: 채팅 input 리렌더링 이슈 해결

KDT1-FE · Nov 10, 2023 · 698d892 · 698d892
1 parent b4df1bb
commit 698d892
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx
@@ -6,17 +6,20 @@ import {
   InputGroup,
   InputRightElement,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { io } from "socket.io-client";
-import useInput from "../../../hooks/useInput";
 import ChatBubble from "../../common/ChatBubble";
 
 interface Message {
   id: string;
   text: string;
 }
-const GameChat = ({ gameId }) => {
-  console.log(gameId);
+
+interface GameChatProps {
+  gameId: string;
+}
+
+const GameChat: React.FC<GameChatProps> = ({ gameId }) => {
   const token = JSON.parse(localStorage.getItem("token") as string);
 
   const socket = io(`https://fastcampus-chat.net/chat?chatId=${gameId}`, {
@@ -26,13 +29,12 @@ const GameChat = ({ gameId }) => {
     },
   });
 
-  // 메세지 데이터
   const [message, setMessage] = useState<Message>({
     id: "",
     text: "",
   });
   const [messages, setMessages]: any = useState([]);
-  const messageValue = useInput("");
+  const messageRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     socket.on("message-to-client", (messageObject) => {
@@ -53,11 +55,14 @@ const GameChat = ({ gameId }) => {
       setMessages([...messages, message]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [message.text]);
+  }, [message.text, message.id]);
 
   const submitMessage = () => {
-    socket.emit("message-to-server", messageValue.value);
-    messageValue.clear();
+    if (messageRef.current && messageRef.current.value) {
+      const messageValue = messageRef.current.value;
+      socket.emit("message-to-server", messageValue);
+      messageRef.current.value = "";
+    }
   };
 
   const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -69,7 +74,7 @@ const GameChat = ({ gameId }) => {
   return (
     <Card p={3} h="100%" mb="20px">
       <CardBody>
-        {messages.map((message, index) => (
+        {messages.map((message: Message, index: number) => (
           <ChatBubble key={index} userId={message.id} text={message.text} />
         ))}
       </CardBody>
@@ -78,8 +83,7 @@ const GameChat = ({ gameId }) => {
           pr="4.5rem"
           type="text"
           placeholder="채팅내용"
-          value={messageValue.value}
-          onChange={messageValue.onChange}
+          ref={messageRef}
           onKeyPress={handleKeyPress}
         />
         <InputRightElement width="4.5rem">

diff --git a/src/components/common/ChatBubble.tsx b/src/components/common/ChatBubble.tsx
@@ -16,7 +16,7 @@ interface ChatBubbleProps extends BoxProps {
   text: string;
 }
 
-const ChatBubble: React.FC<ChatBubbleProps> = ({ userId, text, ...rest }) => {
+const ChatBubble: React.FC<ChatBubbleProps> = ({ userId, text }) => {
   return (
     <Container>
       <Text fontWeight="bold" mb="0px">

diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx
@@ -1,18 +1,12 @@
+import { Button, Card, Center, Grid, GridItem, Text } from "@chakra-ui/react";
 import GameChat from "../../components/Game/GameChat";
-import {
-  Button,
-  Card,
-  Center,
-  Container,
-  Flex,
-  Grid,
-  GridItem,
-  Spacer,
-  Text,
-} from "@chakra-ui/react";
 import useFireFetch from "../../hooks/useFireFetch";
 
-const ProfileCard = ({ userId }) => {
+interface ProfileCardProps {
+  userId: string;
+}
+
+const ProfileCard: React.FC<ProfileCardProps> = ({ userId }) => {
   return (
     <Card w="200px" h="200px" justify="center" mb="20px">
       <Center>
@@ -36,6 +30,10 @@ const Game = () => {
     return <p>Loading...</p>;
   }
 
+  if (!gameId) {
+    return null;
+  }
+
   return (
     <>
       <Grid