React - Mqtt Client

import * as mqtt from "mqtt/dist/mqtt.min";
import React, { useEffect, useState } from "react";

 const { carinfo } = useInfo((state) => state);
  // const {client,changeClient,connectstatus,changeConnectStatus,payload, }
  // const [client, setClient] = useState(null);
  const [connectstatus, setConnectStatus] = useState("");
  const [payload, setPayload] = useState([]);
  const options = {  //옵션들
    keepalive: 3000,
    protocolId: "MQTT",
    protocolVersion: 4,
    clean: true,
    reconnectPeriod: 1000,
    connectTimeout: 10 * 60 * 1000,
    will: {
      topic: "WillMsg",
      payload: "Connection Closed abnormally..!",
      qos: 0,
      retain: false,
    },
    rejectUnauthorized: false,
  };

  const mqttConnect = (host, options) => {
    setConnectStatus("Connecting");  //현제 연결 상태를 체크하기위해 만들어논 듯?
    client = mqtt.connect(host, options); //연결할게요~mqtt.connect(host,option)
  };
  useEffect(() => {
    if (!client) { //클라이언트 꺼져있으믄 아래와같이 연결해라 ws = 웹소캣, ip주소 + 포트번호
      mqttConnect("ws://" + window.location.hostname + ":9001", options);
    }
    if (client) {
      console.log(client);
      client?.on("connect", () => {
        setConnectStatus("Connected");
      });
      client?.subscribe("#", 1, (error) => {
        if (error) {  //topic, params, callbackfunction
          console.log("Subscribe to topics error", error);
          return;
        }
      });
      client?.on("error", (err) => {
        console.error("Connection error: ", err);
        client?.end(); //에러났으면 꺼줘
      });
      client?.on("reconnect", () => {
        setConnectStatus("Reconnecting");
      });
      client?.on("message", (topic, message) => {
        const payload = { topic, message: message.toString() };
        setPayload(payload); //message를 받는데 topic,message를 payload에 저장할게
      });                    //보통 payload는 값임  
    }
  }, [client]);

브로커인 mosquito가 있기때문에 server를 따로 만들 필요는 없다.