[Mini/채팅] 채팅방 중복 생성 방지

 

[Mini/채팅] 채팅방 중복 생성 방지

대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다.

작업 내용

이전 게시글에서는 채팅방을 계속해서 생성할 수 있었다. 이번 게시글에서는 계속해서 생성하는 것을 방지하는 것을 구현해보겠다.

◆ 채팅방 중복 생성 방지

채팅방 중복 생성을 방지하는 것은 매우 쉽다. 이전에 만들어둔 join state를 사용하면 된다. join state는 내가 접속한 채팅방 이름이다. 따라서 join state의 값이 있는 경우 없는 경우를 나누어 처리하면 된다.

우선 Menubar 컴포넌트에서 방만들기를 하기 때문에 props로 join을 추가해주었다. 그리고 3항 연산자를 사용하여 join의 값이 없으면 방 만들기 있으면 방 나가기를 보여주도록 하였다.

{!Boolean(join) ? (
  <form
    onSubmit={e => {
      e.preventDefault();
      onSuccessCreateRoom(roomName);
    }}
  >
    <input
      placeholder="방 만들기"
      value={roomName}
      onChange={e => setRoomName(e.target.value)}
    />
  </form>
) : (
  <button onClick={onLeaveRoom}>방 나가기</button>
)}

App.js도 수정해주었다. 방에 접속한 경우 다른 방 리스트가 보일 필요가 없으므로 접속하지 않은 경우에만 방 리스트를 보여주도록 수정해주었다. 그리고 방에 접속한 경우 해당 채팅방의 채팅 list가 보이도록 Chat 컴포넌트를 보이도록 하였다. (Chat 컴포넌트는 간단하여 확인할 수 있을 것이다. 자세한 것은 다음 게시글에서 구현할 예정)

<div>
  {!Boolean(join) &&
    rooms.map((room, index) => (
      <ChatRoom key={index} roomName={room} onJoin={onJoin} />
    ))}
</div>;
{
  join && (
    <div>
      <Chat roomName={join} />
    </div>
  );
}

위와 같이 구현하면 중복 생성이 되지 않는다. 아래 결과를 확인해보자

다음 작업 내용

이번 게시글에서는 채팅방 동기화 방지를 하였다. 다음 게시글에서는 상대방이 만들어둔 채팅방에 접속하는 방법을 알아보도록 하자.

◆ 참고자료

• 프론트 수정 코드

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.