스크롤 내리다보면 한 번씩 섬네일 오브젝트가 사라졌다가 다시 생기는 현상 수정

[Phryxia]

현재

• 스크롤을 내리다보면 가끔 이미지가 제대로 로드되지 않을 때가 있음
• 콘솔창에 React 메모리 누수 관련 경고 메시지가 뜸

개선

• 에러가 나지 않게 원인을 철저히 분석한 뒤 수정할 것

[Phryxia]

https://github.com/Phryxia/gf-zzalshow/commit/ac1584ac8823bf14cc7dfa04077bdcf7bd57abae

저 커밋이 해당 문제를 해결해주진 않았음. 다만 이 이슈로 인해 발생하는 Thumbnaill의 언마운트 현상으로 인해 리액트 메모리 누수 에러가 떴고, 저 커밋이 메모리 누수를 해결한 것은 맞음.

[Phryxia]

https://github.com/Phryxia/gf-zzalshow/commit/cb6150652c925fff8e133dd203e0d43798ca3ced

해결책이 마우스 클릭 실수로 엉뚱한 커밋에 섞여들어갔음... 이놈의 마우스 바꾸던지 해야지..

원인

• 스크롤이 끝났을 때를 감지하기 위해 디바운스 구현하였음
• 디바운스를 useEffect(..., []) 안에서 설정하는 바람에, 디바운스 함수 내의 setAppend는 렌더 초기버전을 참조하게 됨
• 이로 인해 비정상적인 state setter를 호출하게 되고, fetch()가 두 번씩 불림
• fetch()가 끝남에 따라 setUrl()도 두번씩 호출되고 그 과정에서 레퍼런스의 버전 문제로 인해 렌더가 비정상적으로 일어났음

해결

• 디바운스 콜백을 매 렌더마다 생성하도록 함 (그게 리액트가 의도한 사용법임)
• 디바운스 타이머를 state로 추가하였음

[Phryxia]

여전히 근본적인 문제는 해결안됐음 80% 선을 넘었는데도 계속 스크롤을 하면 이미지가 깜빡거리는 현상이 발생함 왜냐하면 fetch()가 여러번 호출되는 것은 변함이 없음 디바운스가 비정상적인 상황이었다는 것은 인정하지만, 잘못된 디바운스 구현은 쓸데없이 fetch()를 많이 부를 뿐 근본적으로 이미지가 사라졌다 생기는 현상의 원인은 아님.

[Phryxia]

원인

• 임계영역을 넘은 이후로도 스크롤을 여러 번 할 수 있음
• fetch의 결과를 수신하기 전에 fetch()가 한 번 더 일어남
• 이 시점에서 두 번 호출된 loadImage의 인자인 metaInfos와 url이 동일한 레퍼런스를 가짐
• 첫 번째 호출된 loadImage의 fetch 내부에서 url에 불러온 이미지의 주소를 저장
• 두 번째 호출된 loadImage의 fetch 내부에서 일부 이미지가 걸러지게 됨
• 나중에 호출된 setMetaInfos의 인자로 업데이트가 되면서, 일부 이미지가 사라진 상태로 업데이트됨

해결

• fetch가 끝날 때까지 loadImage 호출을 못하게 막음
• setAppend(false)를 fetch가 끝날 때 호출하도록 하였음