[React] 22.07.20 회고록

채팅을 보낼 때 엔터키 이벤트를 받아보자

채팅창 입력창에 글을 쓰고 마우스로 보내기 버튼을 누르는 것이 아니라 엔터키를 눌러서 메세지를 보내고 싶다!!

  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter") {
      btnSend();
    }
  };

이벤트를 받아서 키가 엔터인지 판별해서 엔터일 경우 마우스로 보내기를 눌렀을 때 동작하는 btnSend 함수를 호출해주었다. html, css에서는 이렇게 넣어주면 된다.

          <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"
            onKeyPress={(event) => handleKeyPress(event)}
          />

onKeyPress를 이용해서 handleKeyPress 함수를 넣어주면 잘 작동한다!!

어제의 컴포넌트 재사용이 문제라고 했던 것에 대한 생각

일단 지금 당장은 백엔드하는 친구가 없기때문에 확인을 할 수는 없지만.. 컴포넌트를 재사용한다고 문제가 생기진 않을 것 같다는 생각이 들었다.. 뭐가 문제인지를 찾아야 하는데 지금 당장은 할 수가 없다. 현재 상황을 한번 다시 살펴보자.
1번 채팅방과 2번 채팅방 두곳에 다 내가 참여해있다. 그리고 현재 나의 페이지는 1번 채팅방이다. 그런데 다른 누군가가 2번 채팅방을 들어가면 , 현재 나의 페이지는 1번 채팅방이지만 2번 채팅방에도 속해 있기 때문에 socket.on으로 정보를 받게되면서 현재 나의 페이지에 영향을 주는 게 아닐까 하는 생각을 하고 있다. 그렇다면 socket.on으로 받을 때 현재 나의 페이지가 어디 인지를 확인해서 socket.on으로 받으면 될까? 하는 생각을 하고 있다. 일단 생각만 하고 있다. 확인은 내일 백엔드 친구가 오면 해볼 수 있을 것 같다.

채팅방에 접속해 있는 유저를 받아서 주소로 직접 접근하지 못하게 막는 방법에서 막혀있다.

이건 그냥 기록용이다 4시간 삽질을 했지만 아직 답을 구하지 못했다. 어떻게 해야할지 내일 다시 생각해보아야 겠다.