[19주차] 채팅 리스트 캐싱 처리

우리 프로젝트에서는 React Query를 쓰지 않고, Supabase의 리얼타임 통신 로직을 바로바로 하기 때문에 캐싱 처리를 미처 생각을 못했었는데 최종 발표 3일 전 리팩토링을 하다가 마지막 메세지를 가져와 lastMsg=[]에 다 넣어지기 전에 Null이 뜰때 '로딩중'을 띄어주었던 것을 UX 적으로 개선하고자 했다.

 

새로고침을 하면 당연히 '로딩중' 이 뜨지만, 그래도 페이지간 이동 정도 안에서는 '로딩중'이 안뜨게 하고 싶어서 일단 캐싱 데이터를 넣어줄 빈배열을 하나 만들어주고, 

let cachedData = [] as LastMessageArrayType;

 

마지막 메세지를 가져오는 통신로직 그 다음에 가져온 데이터를 cachedData 배열에 넣어준다

  const fetchChatListData = async () => {
    try {
      const chatListData = await getChatList();
      setChatList(chatListData);
      const roomIds = chatListData.map((item) => item.id);
      const lastMessageArray = await fetchLastMessages(roomIds);
      cachedData = lastMessageArray;
      setLastMsg(lastMessageArray);
      // console.log('lastMsg in fetchChatListData', lastMsg);
    } catch (error) {
      console.error('error in fetchChatList', error);
      alert('서버와의 통신을 실패했습니다.');
    }
  };

 

그런 다음, 

 

상태로 관리해주는 lastMsg의 초기값은 cachedData로 설정

  const [lastMsg, setLastMsg] = useState<LastMessageArrayType>(cachedData);

 

했더니, 페이지간 이동시에는 더 이상 '로딩중'이 나오지 않았다.

 

물론, 지금 한 작업은 약식의 느낌이라 Next.js에서 제공해주는 caching 관련 문서를 찾아봐서 제대로 해야 할 것이다.