[미해결] React Infinite UpScrolling

웹, 앱에서 무한스크롤이 많이 사용된다.

작업난이도도 쉬운편이고 여러가지 라이브러리나 예재가 많아 구현하는데 문제가 거의 없는편이다.

하지만 이번에 마주친 버그는 스크롤을 위로 올렸을때 과거, 이전목록을 불러오는 UpScrolling이다.

실시간채팅에서 과거 채팅을 불러올때 많이 사용되는데

과거 데이터를 불러오게 되면 위쪽에 추가되고 사용자 화면에 표현되는 데이터는 바뀌면 안된다.

그런데 immutability (불변성)에 의해 문제가 발생하는 것같다.

 

동작방식

1. UpScroll을 통해서 사용자가 상단근처 또는 상단에 도달했을때 과거 데이터를 불러온다.

2. 다음과같이 채팅메시지리스트를 바꾼다.

...code

const [messages,setMessages] = useState([]);

...getPrevMessageCode
setMessages([...prevMessage,...messages]);

...code

3. State가 바뀌었음을 감지한 컴포넌트에서 목록을 렌더한다.

 

문제점

1. State가 통째로 바뀌기때문에 리스트를 모두 다시 렌더링한다.

2. 떄문에 현재 리스트에 앞쪽에 'prevMessages'가 추가되는 것이 아니라

지금 list를 대신해서 prevMessage+list 두가지를 통째로 교체하여 사용자가 보고있던 message list가 바뀐다.

3. 뿐만 아니라 사용자의 스크롤위치는 이전 메시지 목록을 가져오는 이벤트를 실행 할 스크롤 위치 이기때문에 이벤트가 몇번이고 반복실행된다.

 

파악된 원인

첫째로 State의 immutability를 지키기위한 State변경방법을 원인으로 보고있다.

하지만 아직 해결된 문제가 아니니 더 테스트 해보고 자료를 찾아 유의미한 결과를 볼것이다.

 

대처방법

prev Message list를 불러오는 api가 실행 되기 직전 메시지리스트를 보여주는 컴포넌트의 height를 저장하고

api가 실행되고 난 후 렌더링 됐을때 height를 계산해서 사용자의 scroll을 내려준다.

하지만 이 방법은 사용자가 스크롤이 부자연스럽게 움직이는 것을 경험한다.

렌더링 후에 측정, 계산, scroll이동까지 모두 진행되기때문에 찰나의 뚝뚝거림을 피할 수 없다.

또 사용자의 스크롤 슬라이딩(미끄러짐)이 의도치 않게 멈추지 않고 계속해서 올라간다.

 

[미해결]