feat: chatting room에 접속시 서버에 API 호출 2번연속으로 하는 문제 해결

src/page/ChatList.js

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { useQuery } from "react-query";
 import styled, {keyframes} from "styled-components";
-import { setScreenSize } from "../shared/common";
 import { chatApis } from "../store/chatApi";
 import ChatRoom from './ChatRoom';
 
@@ -15,7 +14,7 @@ function ChatList({popup, socket, setPopup}) {
   const [idRoom, setIdRoom] = useState(null);
   const [username, setUsername] = useState(null);
 
-  const { isLoading: dataLoading, data: chats, refetch } = useQuery("chatsList", chatApis.chatListGet, {
+  const { isLoading: dataLoading, data: chats } = useQuery("chatsList", chatApis.chatListGet, {
     staleTime: Infinity,
     enabled: true
   });
@@ -25,17 +24,11 @@ function ChatList({popup, socket, setPopup}) {
     setUsername(userName);
     setIdRoom(room);
     setShowChatRoom(true);
-    refetch();
   };
 
   const [scroll, setScroll] = useState();
   const scrollElement = useRef();
 
-  useEffect(() => {
-    setScreenSize();
-    window.addEventListener("resize", setScreenSize);
-  },[])
-
   return (
     <ChatInner ref={scrollElement} onScroll={(e)=>{
       setScroll(e.target.scrollTop);

src/page/ChatRoom.js

@@ -10,30 +10,30 @@ function formatDate(value) {
   return `${hour} ${minute}:${second}`;
 };
 
-function ChatRoom({ socket, room, scroll, scrollElement }) {
+function ChatRoom({ socket, room, scrollElement }) {
   const [currentMessage, setCurrentMessage] = useState("");
-  const [roomJoin, setRoomJoin] = useState(false);
-  const { isLoading: dataLoading, data: chatsRoom, refetch} = useQuery(["chatsRoom", room], () => chatApis.chatRoomGet(room), {
+  const [test, setTest] = useState(false);
+  const { isLoading: dataLoading, data: chatsRoom} = useQuery(["chats", room], () => chatApis.chatRoomGet(room), {
     staleTime: Infinity,
-    refetchOnMount: 'always',
     enabled: true
   });
+
   const [messageList, setMessageList] = useState(chatsRoom.data.chats);
 
   const sendMessage = async () => {
     if (currentMessage !== "") {
       const messageData = { //서버가 필요한 데이터 형식
         roomId: room,
         message: currentMessage,
-        userEmail: jwt_decode(localStorage.getItem('accessToken')).userEmail,
+        userEmail: jwt_decode(localStorage.getItem('accessToken')).userEmail
       };
       const temp = { //화면을 갱신하기위한 데이터 형식
+        roomId: room,
         chatText: currentMessage,
         createdAt: Date.now(),
         me: true,
         newMessage: true,
-        roomId: room,
-        userName: chatsRoom.data.myName,
+        userName: chatsRoom.data.myName
       };
 
       await socket.emit("send_message", messageData);
@@ -53,7 +53,6 @@ function ChatRoom({ socket, room, scroll, scrollElement }) {
   }, [messageList])
 
   useEffect(() => {
-    refetch();
     scrollToBottom();
   },[])
 
@@ -99,7 +98,7 @@ function ChatRoom({ socket, room, scroll, scrollElement }) {
             }
           }}
         />
-        <button onClick={()=>{sendMessage(); scrollToBottom()}}>&#9658;</button>
+        <button onClick={()=>{sendMessage(); scrollToBottom()}}>전송</button>
       </div>
     </ChatInner>
   );

src/shared/common.js

@@ -33,10 +33,4 @@ export const comma = (str) => {
 export const uncomma = (str) => {
 	str = String(str);
 	return str.replace(/[^\d]+/g, '');
-};
-
-/** 윈도우창 리사이즈 함수 */
-export const setScreenSize = () => {
-  const vh = window.innerHeight * 0.01;
-  document.documentElement.style.setProperty("--vh", `${vh}px`);
-}
+};