[React] 새로고침 시 좋아요 유지하기

Today, What I learned?

내 파트는 아니었지만 급하게 좋아요 관련 버그를 수정하게 되었다.

담당하지 않았던 파트라 코드를 들여다볼 일이 많지 않았는데 오히려 좋아!..

 

이번 버그는 새로고침 했을 때 하트가 유지되지 않는 버그였다.

분명 이전에는 되었던 것 같기도 한데 그 사이 수정이 되면서 뭔가 버그가 생긴 듯.. 🤔

 

 

원인 파악

myProjects 컬렉션에 현재 프로젝트 id 값이 확인되어야만 하트를 채우는 isLike가 판단될 수 있는데,

새로고침 했을 때 useQuery에서 데이터를 받아오는 시간이 있어서 처음에 undefined로 값이 들어가 버리는 게 문제인 듯했다.

 

그래서 새로고침하고 하트가 풀리니까 다시 누르면 숫자가 1씩 늘어나는.. 이상한 버그.. 

 

로그를 보면 true로 myProjects 데이터가 있음이 확인되어도 isLike는 계속 undefined였다.

 

 

해결

그래서 일단 코드상으로 useEffect를 추가해서 일단 해결했으나,

 // 새로고침 시 myProjects가 늦게 불러와져서 추가한 useEffect
  useEffect(() => {
    setIsLike(myProjects?.likedProjects?.includes(pid));
  }, [myProjects?.likedProjects]);

이 컴포넌트 안에서 useQuery와 useMutation이 총 4번 쓰이고 있는데 이걸 어떻게.. useQueries나 이런 거로 줄여볼 수 있지 않을까??
하는 생각이 들었다. 내가 짠 코드가 아니라서 함부로 건드릴 수는 없겠지만.. 🥺

잘 들여다본 적 없는 부분이라 좀 더 코드 파악이 필요하기도 하고...

 

결론적으로 리액트 쿼리에 대한 공부가 더 필요할 것 같다는 생각! 😇

워낙 기능이 많다 보니 알아봐야 할 부분이 많은 것 같다.