React에서 로그인 시 callback으로 WebSocket 상태관리하기

React에서 WebSocket과 State Management를 활용하여 로그인 기능을 구현중이다. 

여타의 react hook을 사용하지 않고, callback을 통해 부모 컴포넌트인 app.js와 자식컴포넌트인 login.js사이를 원하는 위치에서 왕복하도록 하였다.

Callback을 활용한 로그인 정보 전송

현재 내 코드를 보면서 설명해보면, App 컴포넌트에서 WebSocket을 초기화하는 initWebSocket 함수는 로그인 작업이 시작되기 전에 호출되며, WebSocket 객체를 생성한다.

 

// app.js

const initWebSocket = (callback) => {
    const ws = new WebSocket('ws://웹소켓 주소');
    ws.onopen = () => {
        console.log('연결완료');
        setWebsocket(ws);
        if (callback) {
            callback(ws);
        }
    };
    ws.onmessage = handleMessage;
};

 

여기서 주목해야 할 것은 callback이다.

 initWebSocket 함수에 callback 인자를 받고 있다. 
ws.onopen 이벤트가 완료되면 if(callback) 문의 값이 참이 되는 이유는, initWebsocket 함수를 호출할 때 callback 인자로 함수를 전달했기 때문이다(아래 login.js 코드 참고).
즉, callback에 값이 할당되어 있으면 if(callback) 조건문이 참이 된다.

여기서 callback이 null이나 undefined가 아니라 실제로 함수를 가리키고 있다면, 그 조건문은 참이 되어 callback()이 실행될 것이다.

 

즉, 이 callback은 WebSocket 연결이 성공적으로 이루어진 후에 실행되는 함수로, callback을 통해 ws객체를 Login 컴포넌트에서 전달할 수 있다.

 

 

 

Login 컴포넌트에서의 작업

Login 컴포넌트의 handleSubmit 함수는 로그인 버튼이 눌렸을 때 호출된다. 이 때, initWebSocket에서 받은 callback을 활용해 로그인 정보를 서버로 전송한다.

// login.js

const handleSubmit = (e, wsInstance) => {
    const wsToUse = wsInstance || websocket; 
    if (wsToUse) {
        const currentTrid = trid + 1;
        const node = {
            cmd: 'LOGIN',
            trid: currentTrid,
            agent_id: username,
            password: password,
        };
        wsToUse.send(JSON.stringify(node));
    } else {
        initWebSocket((ws) => {
            handleSubmit(null, ws);
        });
    }
};

 

 

핵심은 Callback

App 컴포넌트에서 WebSocket을 초기화하고 Login 컴포넌트에서 로그인 정보를 전송하는 과정을 살펴보았다.

여기서 핵심은 callback으로, callback을 통해 App과 Login 컴포넌트가 서로에게 필요한 데이터를 효율적으로 전달할 수 있게 하였다.