[React] 22.07.19 회고록

 

socket.on의 위치를 잘 설정하자

강제 퇴장 기능을 구현하는 과정에서 강제 퇴장 버튼이 있는 컴포넌트에서 emit을 보냈다. 그리고 아무생각 없이 똑같은 위치에서 socket.on으로 백에서 보내는 데이터를 받았더니 팝업을 켰을때만 강퇴가 되는 현상이 발생해서 상위 컴포넌트로 올라가서 socket.on을 하는 것으로 바꾸었더니 잘 되었다.

 

Component 재사용

이거는 정확하게 알지 못해서 이게 문제인지는 정확하게 모르겠다. 컴포넌트를 재사용하면서 소켓통신이 이루어질 때마다 다른 유저의 행동이 나의 행동에 영향을 미치는 것 같다.

똑같은 유저리스트 박스를 다른 페이지에서 각각 사용하고 있는데 이거때문인 것 같다.. 아닌가.. 아무튼 지금은 이놈이 문제일거라고 생각중이다... 내일 컴포넌트 리팩토링해서 나눠보고 결과를 지켜봐야 할 것 같다.

 

요즘 socket.io를 이용해서 채팅을 구현하고 있는데 뭘 어떻게 정리해야할 지 막막?하다. 뭘정리해야하나..흠..

뭐 아무튼 채팅방에서 채팅띄우는 코드나 남겨두고 그만써야겠다.

import React, { useEffect, useRef, useState } from "react";
import { NavLink } from "react-router-dom";
import { socket } from "../../App";
import { IChatMessageSocket } from "../../socket/InterfaceSocket";
import { onChangeFunc } from "../../utils/onChangeFunc";
import ButtonTwo from "../Button/ButtonTwo";
import shortid from "shortid";

interface IProps {
  title: string;
  myId: number;
  roomId: number;
}

function ChatBox({ title, myId, roomId }: IProps) {
  const [emitMessage, setEmitMessage] = useState("");
  const [messages, setMessages] = useState<IChatMessageSocket[]>([]);
  const messageBoxRef = useRef<HTMLUListElement>(null);

  const btnSend = () => {
    socket.emit("chat-room-message", {
      chatRoomId: roomId,
      userId: myId,
      message: emitMessage,
    });
    setEmitMessage("");
  };

  const scrollToBottom = () => {
    if (messageBoxRef.current) {
      messageBoxRef.current.scrollTop = messageBoxRef.current.scrollHeight;
    }
  };

  useEffect(() => {
    socket.on("chat-room-message", (data: IChatMessageSocket[]) => {
      setMessages(data);
    });

    scrollToBottom();
    
  }, [messages]);

  return (
    <div className="content-box w-[550px] mr-3 my-5 relative rounded-none rounded-r-lg rounded-bl-lg">
      <div className="absolute top-[-30px] left-[-2px] border-main border-x-2 border-t-2 bg-white w-[60%] h-[30px] rounded-t-lg px-2 py-1 text-center">
        <div className="absolute left-2 cursor-pointer">
          <NavLink to="/chat">&lt;</NavLink>
        </div>
        <div>
          <span className="font-main text-main-text">{title}</span>
        </div>
      </div>
      <div className="w-full h-full flex flex-col justify-start items-center">
        <ul
          className="w-[90%] h-[80%] border-main border-2 mt-7 p-1 font-main overflow-y-scroll"
          ref={messageBoxRef}
        >
          {messages &&
            messages.map((message) => (
              <li className="font-main" key={shortid.generate()}>
                {message.nickname + " : " + message.message}
              </li>
            ))}
        </ul>
        <div className="w-[90%] flex justify-between mt-4">
          <input
            type="text"
            value={emitMessage}
            onChange={(event) => onChangeFunc(event, setEmitMessage)}
            className="w-[85%] border-main border-2 rounded px-2 py-1 text-sm font-main"
          />
          <div>
            <ButtonTwo tag="보내기" className="py-1" onClick={btnSend} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default ChatBox;

useRef를 통해서 ref를 걸어서 입장하거나 채팅을 입력했을 시 스크롤을 최하단으로 옮기는 코드를 남겨두고 싶어서 이 코드만 남겨놓는다. 끄으으읕