React Big list state 관리 이슈

Issue

Infinity scroll을 구현하면서, 해당 row에 체크하는 기능을 추가.

리스트의 양이 적을 때는 문제 없이 빠르게 체크 영역이 표시가 되었다.

But, 리스트의 양이 많아지면서 문제가 생겼다. 2000줄 정도 스크롤을 내리고 선택을 했을 떄 선택 영역의 반응이 매우 느린 이슈가 생겨버렸다.

원인 파악.

1. 클릭한 리스트에 대해 push, slice 같은  함수에서의 시간 복잡도 문제?
2. 렌더링 문제?

원인 1. 
console.time을 찍어 보았을 때 현 문제되는 이슈의 원인이 되지 않음. 
( 물론 slice 부분에서 O(n)에 따라 선택한 리스트가 많아졌을 때 이슈가 존재할 수 있음. 이 부분은 별도록 처리 )

원인 2.

console.log를 찍어 보았을 때, 클릭한 row에 대한 re-rendering이 아닌 모든 row에 대해 re-rendering이 이루어짐.
=> 원인 2가 문제

해결.

 

일단, 수정 전의 코드이다.
table에 대한 값을 단순히 바로 뿌려줌.

이는 한 row에 대한 상태 값이 변하게 되면 모든 리스트에 대해 리렌더링을 가지게됨.

 

시행착오

처음에는 단순히 row에 대한 전체 Compnent + 상태를 따로 분리하여 memo를 하였다.

이렇게 한 후 테스트를 했을 때 별 차이가 없었다. 잘못된 해결방안인가 생각.
하지만 memo에 대한  기능을 다시 고려하였고 props가 변하지 않으면 캐쉬가 된다는 걸 다시 생각.

 

마무리

row 내에서 불필요한  상태값을 부모로 빼어내고, 필요한 상태값만 props로 넘겨주고, memo
코드는 다음과 같다. 

위와 같이 진행하였더니, 불필요한 렌더링이 사라졌고, 이에 따라 리스트의 양이 많아져도 선택한 영역에 대한 상태값이 버벅임 없이 렌더링이 가능해졌다.