[❗️Error Handling] [Workspace - Chat] 채팅 데이터 중복 요청 에러

[useonglee]

어떤 에러인가요?

• 채팅 입력시 채팅 데이터를 서버에 중복 요청한다.
• reducer나 payload를 logger를 통해 개발자 도구에서 확인하는데, 같은 logger가 두 번이나 찍혀서 채팅을 한 번입력하면 채팅이 여러번 입력되는 에러가 발생한다.

에러 메시지

에러 핸들링 방법

이유는 간단했다. 맨 처음에 socket을 활용해서 채팅 서비스를 구현했을 때는 state를 통해서 상태를 관리 했다.

그래서 useEffect를 통해서 렌더링 이후 채팅 데이터가 바뀔 때 마다 업데이트를 해주어야 했기 때문에, useEffect의 의존성 배열에 채팅 데이터 state 변수를 넣어주었다.

const [chatData, setChatData] = useState<chatDataType>([]);

useEffect(() => {
  // socket을 통해 모든 채팅 기록을 서버로 부터 받아온다.
  socket?.on('getAllMessages', ({ chats, isEnd }: AllMessagesDataType) => {
  setChatData([chats])
  });
  // chatData의 값이 바뀔 때 마다 업데이트
}, [chatData]);

그리고 나는 성능 개선을 위해 redux로 리팩토링을 하였다. 그리고 모든 state를 지우고 스토어에서 useSelector를 통해 데이터를 꺼내 오고 있었다. 여기서 데이터의 중복 요청 원인이 발생했다.

state로 데이터의 상태를 관리할 때는 데이터의 값이 바뀔 때마다 useEffect의 의존성 배열로 변경점을 감지 해주어야 했지만 redux로 사용할 때는 그럴 필요가 없었다.

useSelector 자체에서 상태를 관리하고 상태의 변화까지 감지해주기 때문이다. 그래서 redux를 쓸 때는 의존성 배열을 사용할 필요가 없다는 것을 깨달았다.

결론은 의존성 배열에 채팅 데이터를 넣으면 두 번 감지를 해서 logger에 두 번이나 찍혔던 것이다..

const chatData = useSelector(getChatDataSelector);

useEffect(() => {
  // socket을 통해 모든 채팅 기록을 서버로 부터 받아온다.
  socket?.on('getAllMessages', ({ chats, isEnd }: AllMessagesDataType) => {
  setChatData([chats])
  });
}, []);

에러 핸들링을 위해 참고한 레퍼런스 링크

(삽질을 통해 깨달은 나의 노오력..)