React socket io client 적용 방법

기존 공식 홈페이지나 주변 예시를 따라하면 페이지가 넘어가도 소켓이 남아있다거나 너무 많은 소켓 이벤트가 등록되는 문제가 발생해 직접 리액트에서 소켓을 구현해 본 글입니다.

 

const [socket, setSocket] = useState();

useEffect(() => {

	const socketIo = io("http://localhost:8080", {
		cors: {
			origin: "http://localhost:8080",
			credentials: true
		},
		transports: ["websocket"],
		query: {
			tenant: 'EGU'
		}
	})
       
    socketIo.on('responsRoom', (data) => {
		console.log(data)
	})
        
	setSocket(socketIo)

}, [])
    
useEffect(() => {
	return (() => {
		if (socket) {
			socket.disconnect();
		}
	})
}, [socket])

const joinRoom = () => {
	socket.emit('refresh', {
		noticeNo: params?.noticeNo
	})
}

 

첫 번째 useEffect는 페이지 렌더링시 딱 한번 실행하며 소켓을 연결하고 state로 관리한다.

소켓 이벤트가 여러번 중접되지 않게 같은 부분에 socket.on('EventName',  callback )함수로 socket.io 리스너 이벤트를 적용한다.

 

두 번째 useEffect는 socket state가 변경되기 전이나 페이지가 unmount되었을 때 동작하며 소켓 연결을 끊습니다.

이 부분이 핵심입니다. 소켓이 변경되거나 페이지가 언마운트되면 연결을 끊어 소켓 이벤트 리스너의 중복 등록이나 페이지 이동시 불필요한 소켓 이벤트 감지를 막습니다.

 

마지막으로 socket.emit("EventName", Data)를 통해 소켓 통신을 합니다.