[FE] 탭이 종종 랜더링되지 않고 터지는 버그를 수정한다.

healim01 commented 3 weeks ago

❗ Issue

917

✨ 구현한 기능

탭이 터지는 버그 드디어... 잡았습니다.

문제 상황 요약

터지는 에러 문제 : 카테고리 ID: 4 를 찾을 수 없습니다. 해당 문제는 탭을 생성할 때 모든 질문이 다 체크되어있는지 확인하는 과정에서 스토어가 가지고 있는 카테고리와 전달받은 카테고리를 비교하면서 발생합니다.

아래 사진을 보시면 첫번째가 api 호출 부분입니다. 받아오는 api 에는 4번이 있습니다. 그런데 두번째 사진의 스토리지를 보시면 4가 없고 3까지만 있는걸 확인하실 수 있습니다.

이 과정을 체크하고 어떻게 하면 이런 문제가 생길까 시나리오가 짜서 시뮬레이션을 돌려봤습니다.

예상 시나리오 :

카테고리가 4개인 상태에서 새 체크리스트를 작성하려고 했다.
작성 중 완료하지 않고 뒤로가기 버튼 을 누르지 않은채 빠져나옴
이후 새로운 링크 혹은 새로운 디바이스, 혹은 url 이동 등으로 스토어 리셋이 되지 않은 상태 발생
이 상태에서 카테고리가 다른 기존 체크리스트의 편집 페이지로 이동하게 되면 에러 발생

돌린 결과 역시나~! 에러가 터졌습니다~!!! 꽤나 예상치 못한 플로우라서 이전에 에러 터지는걸 찾는걸 실패한 이유가 있었네요

에러 발생의 원인

// src/store/useChecklistStore.ts
 initAnswerSheetIfEmpty: (questions: ChecklistCategory[]) => {
          if (get().checklistCategoryQnA.length !== 0) return;
...
}

기존 스토어에서 init 하는 메서드에서 내부에 데이터가 존재할 때 이후 로직을 모두 무시함. 그러다 보니 새로운 데이터가 들어올 때 기존 스토어와 데이터가 안맞아서 에러를 터뜨림

해결 과정

기존 스토어에서 해당 조건문을 삭제
- 바로 삭제하려고 시도했으나 여기저기서 구독을 진행 중 + init 훅에서 useEffect 를 사용하지 않고 선언되어서 무한 호출 에러 발생
- 해당 부분 리팩토링 진행하여 한번만 실행되게 변경

이슈 해결.. 인줄 알았으나 문제 2 발생

문제 2

기존에 문제의 원인이라고 짐작했던 재랜더링 안되는 이슈 발생

해당 이슈도 앞에 사건과 동일하게 비동기 데이터 그 자체와 그 데이터를 스토어에 저장하여 다시 꺼내어 비교하는 과정에서 에러 발생 해당 메서드를 호출할 때 조건식으로 비동기 데이터와 스토어의 데이터가 동일한 카테고리를 들고 있는지 확인한 후 호출하도록 조건을 추가했습니다.

그래서 결론