👨‍💻 사건

Squad 에 포함되지 않는 선수를 클릭하여, DetailPage 로 이동을 하면 정상적으로 렌더가 되는데, 상태관리 Squad 에 포함되거나, DB에 저장된 Squad 에 포함된 선수를 클릭하여 Detail Page 로 이동하면 아래와 같은 에러가 발생한다.

"Warning: Cannot update a component (HotReload) while rendering a different component (FieldPlayerMainStat)" 에러가 발생하고 있다

해당 경고 메시지는 React 컴포넌트의 렌더링 도중에 다른 컴포넌트의 상태를 변경하려고 할 때 발생합니다.

시도한 방법

1. FieldPlayerMainStat 컴포넌트 이외에도 관련된 컴포넌트 중 상태관리를 하는 컴포넌트를 파악 → setState 혹은 전역 상태관리 사용 X
2. react-query 를 사용하여, 각 컴포넌트에서 캐싱된 데이터를 불러오는데 Data 가 잘 넘어오는지 확인 → 각 컴포넌트 이상없음
3. Link 의 href 확인 → 이상없음
4. 재렌더링 하면 정상적으로 렌더 → react-query 의 refetch 함수 사용 → 변화없음

서버에서 페이지 새로고침

새로고침을 하면, 정상적으로 렌더되는것을 확인하고 아래와 같은 방법을 사용

onClick={() => window.location.href = /squad/player/${String(user.UID)}}

페이지 자체를 새로고침 하여, 클라이언트 사이드가 아닌 서버에서 페이지를 리 로드 하는 방식을 사용

❗️ 문제점 : SPA 의 장점인 빠른페이지 전환의 장점 잃게됨

✅ 해결

생각해보니, react-query 를 통해 Fetch 한 데이터를 상태관리 하고있었다.

Props 드릴링 대신, 각 컴포넌트에서 동일한 Query key 를 통해 캐싱된 데이터를 사용하는 방안을 선택하여 사용중이였다.

혹시... 이 상태관리 때문에 문제가 발생한게 아닌가 하여, 각 컴포넌트에 Props 로 데이터를 전달하는 방식을 진행했다.

결과적으로... 아주 정상적으로 동작하였다.

Props 전달도 1번만 거쳐가기 때문에 문제없다고 판단하여, 전부 변경하였다.

💭 개선

• Squad 에 포함된 선수를 제거할수있는 상태관리를 추가해야한다.
• 모든 기능을 계속 사용하여, 이번과 같은 에러를 찾아야한다.
• 최종적으로 일요일에 dev 배포하고, 테스트 해볼 예정이다.