modulersYJ/ganoverflow-front

[ Resolved! ]Bug: Chat페이지 - 이어하기 후 저장 시, title 수정이 re-render되지 않는 문제 규명 & Fix

Closed this issue · 3 comments

ABizCho commented

원인 규명, FIX 시도 리스트

  1. Container.tsx에서 useEffect를 사용해 foldersData의 변경에 따라, localData라는 지역상태에 업데이트하여 리렌더링을 유도해봄
    -> 실패

  2. Container.tsx에서 memo를 지워봄 -> 실패

  • memo가 얕은 비교를 수행하여 리렌더링 검사를 하는 것으로 알고 있어 이를 비활성화 시켜봤으나 무용했음

  1. spreadOperator로 state 객체주소 바꿔줌 (deep copy) -> 실패.

  2. 문제의데이터s.map( <컴포넌트 props=props... /> )에서 뿌려진 컴포넌트에 key에 변화되는 데이터를 동적으로 넣어줌으로써(이 경우 title) 변화 감지 및 리렌더 유도 -> 성공!!!!

...etc



FIX 완료

@hongregii FIX했습니덩...ㅋㅋㅋㅋㅋㅋㅋ


마지막 PR이후, 해당 문제 원인규명하려고 달려봤고 뭐 이것저것 의심도해보고 시도도 해보았는데, 정 ~~ 말 이상하게 set과 useEffect가 리렌더링을 유도하지 못하더라구요.


분명 send는 되는데 왜 put은 리렌더링을 못시키지??? <- 결국, 여기에 물음표가 잔뜩 찍혔습니다.

직전 PR #65 의 마지막 커멘트의 3번 섹션에서 분석했던 것 처럼, sendChatPost와 putChatPost는 둘 다 동일하게 요청 후 의도된 사이드 이펙트로 foldersData를 새롭게 수정된 데이터로 갱신하도록 설계되었고, 실제로 업데이트된 foldersData를 set해주었는데 왜 putChatPost의 타이틀 수정사항만 사이드바에서 리렌더링 되지 않는것인가? 이 의문을 다시 파고들었어요.




둘의 결정적 차이로는,

  1. sendChatPost는 foldersData에 새로운 chatpost정보를 추가 갱신한다.
  2. putChatPost는 foldersData에서 기존에 존재했던 chatpost의 title을 수정 갱신한다.

정도죠!!


이말인 즉슨, 추가된 컴포넌트는 변화를 감지하고 수정된 컴포넌트는 변화를 감지하지 못한다는 뜻이고,
이 리렌더링 차별점이 발생하는 지점이 정확히 어디인지 알기 위해 page - foldersData가 Chatpost컴포넌트까지 내려가는 모든 과정을 쭉 다시 정독해내려갔습니다.


사이드바의 Chatpost를 map으로 뿌려주는 부분이 유일하게 추가,수정의 차이가 발생하는 지점이라고 보였습니다. -> 이미 뿌려진 컴포넌트에 대한 수정 추적을 못하고 있는 것이다, 반면 추가되는 경우 새로 뿌려줄것이 생기니까 리렌더하는 것.


그럼 setState, useEffect에 의해 리액트가 감지하지 못하는 수정 추적, 변화를 어떻게 알려주지?

key prop에 기존 chatPostId를 넣어주던 것(변화가 없던 state값) -> chatpostId + chatpostName(변화가 있는 값)으로 바꿔 넣어주면 컴포넌트 변경을 감지하겠지?

라는 생각에 key부분을 이처럼 수정하였고, 타이틀이 정상적으로 수정되는 것을 확인했습니다!


image

gof-put-rerender



이로써 문제는 해결했지만.

왜 setState, useEffect 만으로 상태변화의 감지 -> 리렌더링이 일어나지 않은 것인지에 대한 원인규명은 더 깊이 해보고싶네요.. ㅋㅋㅋㅠ

ABizCho commented

#68 에 관련 PR 올렸고 해당 이슈 close하겠습니다!

hongregii commented

@ABizCho 아! 그문제였군요! 전 로직이 복잡해서 그 안에 어딘가 코드가 꼬여있다고 생각했었는데, 리액트 개념 관련한 이슈였네요!!

성우님도 알아두시면 좋을 것 같아서 공유 드릴게요!

https://react.dev/learn/preserving-and-resetting-state# ← 공식문서입니다. 꼭 중간중간 튜토리얼까지 하시고 예제코드 완전히 이해하시면서 천천히 2-3시간 써서 읽어보세요!! (강강강추). 정확히 왜 그자리에 key prop을 사용해서 리렌더링해야 하는지를 알려주고 있어요.

https://velog.io/@hongregii/%EB%B2%88%EC%97%AD-State-%EC%9C%A0%EC%A7%80-%EB%A6%AC%EC%85%8B%ED%95%98%EA%B8%B0-NEW-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C ← 이건 제가 해당 문서를 번역한건데, 번역이 깔끔하지는 않지만... ㅋㅋㅋ 제가 이해한대로의 내용이 담겨있어서 막히실때마다 종종 보시면서 이해하세요! markdown 특성상 리액트 코드를 임베드할수가 없어서 메인은 공식문서를 보시면서 하셔야 합니다!!

ABizCho commented

@hongregii
오!!! key prop을 사용해서 리렌더링을 유도하는 것이 공식에서 안내하는 내용이군요?
사이다 정보 감사해요! 역시 공식문서는 신이네요ㅋㅋ.. 아직도 정독하지 않은것을 깊게 반성.

제안해주신 https://react.dev/learn/preserving-and-resetting-state# 문서는 꼭 금주내로 정독해봐야겠어요 ! !

(+ 블로그 알차게 잘 가꾸고 계시네요 멋집니다!)