[Socket Omok] 10. 메세지 창 만들기

목차

1. 메세지 창 만들기

메세지 창 만들기

현재 서버에서 플레이어가 방에 들어올 때, 나갈 때, 승리할 때 방에 있는 플레이어들에게 "message" 메시지를 보내도록 되어있다.

 

이를 게임 패널에 띄워서 사용자들도 누가 들어왔는지, 누가 나갔는지 알려주면 좋을것이다.

GamePanel에 message에 대한 이벤트를 추가하고 패널 안에 보여지도록 했다.

 

const GamePanel = ({ roomname, blackPlayer, whitePlayer }) => {
  const [message, setMessage] = React.useState([]);

  React.useEffect(() => {
    socket.on("message", (msg) => {
      setMessage((value) => [...value, msg]);
    });
  }, []);
  
  ...

  const MessageLine = (msg) => {
    return (
      <>
        {msg}
        <br />
      </>
    );
  };
  
  ...

  return (
    <div className="game-panel">
      <div className="game-panel__main">
        ...
        <div className="game-panel__message">
          <p>{message.map(MessageLine)}</p>
        </div>
      </div>
      ...
    </div>
  );
};

 

이제 message가 들어오면 message 배열이 업데이트 되고, 자동으로 리렌더링 될것이다.

 

잘 된다.

 

이렇게 간단하게 기능이 계속 추가되는걸 보니 React를 사용하길 잘했다는 생각이 든다.