[React] Spring Boot with React 채팅 서버 : 2-1. hooks

1. useInput

• useState 의 기능을 활용하여 email, password 등의 입력란에 값이 적혀질 경우 렌더링 되도록 useCallback 함수로 메모이제이션한 handler 함수를 리턴하는 hooks를 정의함
• input 태그의 onChange 속성에 대입하여 사용함

type ReturnTypes<T> = [T, (e: ChangeEvent<HTMLInputElement>) => void, Dispatch<SetStateAction<T>>];

const useInput = <T>(initialData: T): ReturnTypes<T> => {
    const [value, setValue] = useState(initialData);
    const handler = useCallback((e: ChangeEvent<HTMLInputElement>) => {
        setValue((e.target.value as unknown) as T);
    }, []);
    return [value, handler, setValue];
};

export default useInput;

 

2. useStomp

• sockjs 모듈로 stomp protocol을 연결하는 custom hook
• 핸드쉐이크할 endpoint를 webpack-dev-server의 proxy 서버 target값과 일치시켜 요청하도록 셋팅
• connect, disconnect를 화살표함수로 생성하여 리턴함
  • 해당 프로젝트는 navigation bar 에서 전역적으로 websocket을 연결할 것이며, 채팅방 접속시 위의 stomp client를 redux 전역 스토어에서 get하여 사용하도록 구성할 것임

import {Client} from "@stomp/stompjs";
import SockJS from "sockjs-client";

const useStomp = (client: React.MutableRefObject<Client | undefined>, destination: string, callback) => {
    const connect = () => {
        client.current = new Client({

            webSocketFactory: () => new SockJS('/ws-stomp', {}, {
                transports: ["xhr-polling"] // 서버에서 websocket이 사용이 불가할 경우 대체하여 통신에 쓰일 프로토콜을 http long polling으로 설정 
            }),
            reconnectDelay: 200000,
            heartbeatIncoming: 16000,
            heartbeatOutgoing: 16000,
            onConnect: () => {
                console.error("0 stomp onConnect : ");
                client.current?.subscribe(destination, callback)
            },
            onStompError: (frame) => {
                console.error("1 stomp error : ", frame);
            },
            onDisconnect: (frame) => {
                console.error("2 disconnect : ", frame);
            },
            onWebSocketClose: (frame) => {
                console.log("3 Stomp WebSocket Closed", frame);
            },
            debug: function (str) {
                console.error("4 debug : ", str);
            },
            onUnhandledMessage: (msg) => {
                console.log("5 unhandled Message", msg);
            }
        });

        client.current?.activate();
    };

    const disconnect = () => {
        client.current?.deactivate();
    };

    return [connect, disconnect]
}

export default useStomp;

 

출처 :
https://www.inflearn.com/course/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85/dashboard
https://github.com/ZeroCho/sleact/tree/master/alecture/pages