상태 관리 지옥 탈출하기 (feat. websocket)

export const useSocketEmitter = <Req extends socketEmitRequest, Res = unknown>(event: string, data: Req) => {
  const [err, setError] = useState<unknown[]>([]);
  const [isExecuting, setIsExecuting] = useState<boolean>(false);
  const [response, setResponse] = useState<Res | null>(null);
  const socket = useContext(SocketContext);
  const roomId = data.roomId;

  const EMIT = useCallback(() => {
    return new Promise((resolve, reject) => {
      try {
        {
          setIsExecuting(true);
          socket.emit(event, { data }, (res: Res) => {
            setResponse(res);
            resolve(res);
          });
        }
      } catch (error) {
        reject(error);
      }
    });
  }, [socket, event, data]);

  useEffect(() => {
    EMIT()
      .then(() => setIsExecuting(false))
      .catch(error => setError(prev => [...prev, error]));

    return () => {
      socket.emit('leaveRoom', { roomId });
    };
  }, [EMIT]);

  return { EMIT, response, errors: err, isExecuting };
};

// api/live.ts
export function live(ws: Socket | null) {
  return {
    send: {
      connect: (roomId: number, nickname: string, seller: boolean) =>
        ws?.emit('enterRoom', { nickname, roomId, seller }),
      ...
    },
    receive: {
    ...
    },
  }
} //이 파일 안에 소켓 API에 대한 메서드가 선언되어 있었고,
// 세부 로직들은 위의 메서드로 작성되어 가독성이 떨어지고 유지보수가 어려운 상태였습니다.
...
useEffect(() => {
  if (roomInfo) {
    const { auctionRoomId, nickname, seller: type } = roomInfo;
    try {
      live(socket).send.connect(auctionRoomId, nickname, type);
    } catch (err) {
      catchError(err);
    }
    return () => {
      live(socket).send.leave(auctionRoomId);
    };
  }
}, [userId, roomInfo?.auctionRoomId]);
...

// 라이브 경매 컴포넌트
const { error } = useSocketEmitter('enterRoom', {
  nickname: roomInfo?.nickname,
  roomId: roomInfo?.auctionRoomId,
  seller: roomInfo?.seller,
});

useSocketListener<UpdateBidResponse>('updateBid', ({ nickname, price }) => {
	//...수행할 로직
}, deps);

export const useSocketListener = <Res>(event: string, handler: (data: Res, ...args: any[]) => void, deps?: any[]) => {
  const [err, setError] = useState<unknown[]>([]);
  const socket = useContext(SocketContext);

  const memoizedHandler = useCallback(handler, deps || []);

  useEffect(() => {
    try {
      socket.on(event, memoizedHandler);
      setError([]);
    } catch (error) {
      setError([...err, error]);
    }
    return () => {
      socket.off(event, memoizedHandler);
    };
  }, [socket, event, memoizedHandler]);

  return { error: err };
};

const { EMIT } = useSocketEmitter('roomClosed', {
  roomId: roomInfo?.auctionRoomId,
});
useSocketListener('roomClosed', () => 
	EMIT().finally(() => (roomInfo?.seller ? navigate('/seller/exit') : navigate('/exit'))),
);