채팅 기능 client 가 null 값이 돼요

Question

하나의 페이지에서 connectHandler를 작동하고
또다른 페이지에서 sendHandler를 작동하려고 하는데

이렇게 해서는 useChat()이 리렌더링 되면서
client 값이 초기화가 되더라구요

값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서...

connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데
그러면 또 client값이 connect한 값이 아니더라구요

무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ
(한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!)

import { CompatClient, Stomp } from @stomp/stompjs;
import { useRef } from react;
import { useRecoilState } from recoil;
import { inputMessageState, messageState } from ../../states/chatting;

export function useChat() {
  const [messages, setMessages] = useRecoilState(messageState);
  const [inputMessage, setInputMessage] = useRecoilState(inputMessageState);
  const token = localStorage.getItem(accessToken);

// 채팅 연결 구독
  const client = useRef<CompatClient>();
  const connectHandler = () => {
    client.current = Stomp.over(() => {
      const sock = new WebSocket(wss://m-ssaem.com:8080/stomp/chat);
      return sock;
    });
    client.current.connect(
      {
        token: token,
      },
      () => {
        client.current &&
          client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, {
            token: token!,
          });
      },
    );
  };
  const onMessageReceived = (message: any) => {
    setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]);
  };

// 채팅 나가기
  const disconnectHandler = () => {
    if (client.current) {
      client.current.disconnect(() => {
        window.location.reload();
      });
    }
  };
  // 채팅 보내기
  const sendHandler = () => {
    if (client.current && inputMessage.trim() !== ) {
      client.current.send(
        `/pub/chat/message`,
        {
          token: token,
        },
        JSON.stringify({
          roomId: 1,
          message: inputMessage,
          type: TALK,
        }),
      );
      setInputMessage();
    }
  };

return {
    connectHandler,
    disconnectHandler,
    sendHandler,
  };
}

L · Answer

지금 구조에선 clientRef는 useChat이 사용되는 곳 마다 초기화 될 수 밖에 없습니다. 방법 중 하나론 Context API로 전역에서 사용하거나 원하는 범위에서 사용하는 방법이 있을 것 같습니다. import React, { createContext, useContext, useState, useEffect } from 'react'; const ChatContext = createContext(); export const ChatProvider = ({ children }) => { const handlers = useMemo(() => ({ connect, disconnect, send }), []) return ( <ChatContext.Provider value={handlers}> {children} </ChatContext.Provider> ); }; export const useChat = () => { return useContext(ChatContext); }; // App.tsx 혹은 어디든.. import { ChatProvider } from './ChatContext'; function App() { return ( /* 리코일 루트보다 하위 */ <ChatProvider> {/* 나머지 컴포넌트들 */} </ChatProvider> ); } export default App; 토큰은 connect 한테 인자로 받는게 좋을거 같습니다. 보다보니 계속 수정하게 되네요. 대신 이렇게 쓰면 리코일 상태는 같이 안쓰는 쪽이 좋을거 같습니다. sendHandler도 인풋메시지를 인자로 받는 편이 좋아보입니다.