[❗️Error Handling] [Workspace - Chat] 채팅 room 바꿀 때 마다 이전 데이터까지 불러오는 현상

[useonglee]

어떤 에러인가요?

• 현재 채팅방에서 다른 채팅방으로 이동할 경우, 현재 채팅방의 데이터까지 다 이끌고 다른 채팅방을 가는 현상을 발견했다.

에러 메시지

에러 핸들링 방법

첫번째 시도에서는 소켓을 통해 서버에서 전체 메시지 기록들을 받아오는 과정에서, 의존성 배열을 넣어서 채팅 기록들이 바뀔 때마다 채팅 기록들을 불러왔다.

그리고 채팅방이 바뀔 때 마다 리덕스의 State를 빈 배열로 업데이트를 하였다.

//chatData는 useSelector로 리덕스에서 채팅 기록을 불러온 것이다.

useEffect(() => {
// TODO: 전체 채팅 내용에서 30개씩 불러온다.
  socket?.on('getAllMessages', ({ chats }: AllMessagesDataType) => {
  dispatch(getAllMessages(chats));
  });
}, [chatData]);

useEffect(() => {
// TODO: room이 바뀌면 해당 room의 채팅 기록만 불러오기
  dispatch(changeRoom([]));
}, [room]);

// Reducer
changeRoom: () =>  (state, { payload }: PayloadAction<ChatDataType[]>) => {
  state = payload;
},

결과는 실패했다. 계속 채팅의 기록들이 여러번 불려왔다. console.log를 이곳 저곳 다 찍어보면서 확인하고 몇 시간동안 들여다 본 결과 해답을 찾았다....ㅠㅠㅠㅠㅠㅠㅠ

일단 나는 logger를 통해 개발자 도구에서 리덕스 상태관리 현황을 보고 있었는데, getAllMessages의 reducer만 여러번 찍히는 것을 확인했다.

그래서 getAllMessages의 reducer를 사용하는 부분에서 의존성 배열을 chatData가 아닌 room으로 바꿔 보았다. 그랬더니 이번엔 reducer가 2번이나 찍히는 것을 확인했다.

그래서 나는 저 부분에서 문제가 생기고 있다는 것을 캐치했고, 의존성 배열을 제거해주었다. 그리고 채팅방을 옮길 때 마다 리덕스의 State를 초기화 해 주었다.

//chatData는 useSelector로 리덕스에서 채팅 기록을 불러온 것이다.

useEffect(() => {
  socket?.on('getAllMessages', ({ chats }: AllMessagesDataType) => {
  dispatch(getAllMessages(chats));
  });
  //의존성 배열 제거
}, []);

useEffect(() => {
// TODO: room이 바뀌면 해당 room의 채팅 기록만 불러오기
  dispatch(changeRoom([]));
}, [room]);

// Reducer
changeRoom: () =>  initialState;

어제 새벽부터 오늘 아침까지... 뚫어지게 쳐다 본 결과 해결했다....ㅠ

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

(삽질을 통해 깨달음을 얻은 나의 지혜(?))