[Bug/#659] 그룹유저 선택 리스트 렌더 최적화
문제 상황
- 팀 선택 클릭 시마다 애니메이션과, 렌더속도가 매우 버벅 버벅 거리는 현상이 있어서 최적화가 필요함.
- 프로파일러 디버깅 결과, deviceState가 하나 변할 때마다 오는 사이드이펙트가 굉장히 큰 것으로 확인된다. 구독하고자 하는 값의 변화가 아님에도 상태가 오브젝트로 관리되고 있으므로, setState가 호출 되면서 새로운 오브젝트가 되므로 오브젝트 내의 어떠한 값이라도 참조하고 있는 컴포넌트들은 모두 리렌더링 된다.
- 그룹 선택 시 마다 그룹리스트가 3번 연속 리렌더링이 일어나는 현상을 보이고 있다.
- 화면을 터치할 때마다 CartridgeChangedModal과 ScreenSaver 컴포넌트가 리렌더링 되고 있다. 원인 분석 후 해결이 필요하다.
변경사항
- 팀 선택 클릭 시마다 애니메이션과, 렌더속도가 매우 버벅 버벅 거리는 현상이 있어서 최적화 진행
- 프로파일러 디버깅 결과, deviceState가 하나 변할 때마다 오는 사이드이펙트가 굉장히 큰 것으로 확인된다. 구독하고자 하는 값의 변화가 아님에도 상태가 오브젝트로 관리되고 있으므로, setState가 호출 되면서 새로운 오브젝트가 되므로 오브젝트 내의 어떠한 값이라도 참조하고 있는 컴포넌트들은 모두 리렌더링 되고 있어서, 개별 상태로 나누는 작업 진행함.
- 앞으로 상태들도 동일하게 관리할 수 있도록 재사용 가능한 함수 구현
- 그룹 선택 시 마다 그룹리스트가 3번 연속 리렌더링이 일어나는 현상 해결
- 화면을 터치할 때마다 CartridgeChangedModal과 ScreenSaver 컴포넌트가 리렌더링 되던 현상 해결
테스트 방법
구현 내용 (스크린샷, gif) :
프로퍼티 개별 상태 관리 로직 구현
앞으로
makeState(오브젝트)로 상태를 생성하면 개별 프로퍼티들이 각각 makeVar 된 결과물을 반환받아 상태를 개별로 구독시킬 수 있으며, 제네릭을 통해 적절하게 타입이 반환되도록 하였음.
그룹유저 선택 렌더 최적화 전
슬립모드에서 전환될 뿐인데도, deviceState의 상태 사이드이펙트로 인해 그룹유저 목록 리스트가 리렌더링된다.
5초간의 짧은 시간임에도 커밋 페이즈가 엄청 많이 찍혀 있는 것을 볼 수 있고, 그룹유저 목록이 세번 연이어서 리렌더링 되는 모습도 보인다.
이로 인해 버벅거림이 유발되었다고 볼 수 있다.
그룹유저 선택 렌더 최적화 후
프로퍼티를 각각의 개별 상태로 관리하고 있으므로, 슬립모드에서의 전환이 그룹유저 목록의 렌더링에 영향을 끼치지 않으므로 그룹유저 목록 컴포넌트가 리렌더링 되지 않는 것을 볼 수 있다.
또한 동일한 시간동안 녹화한 것임에도 불구하고 커밋페이즈가 굉장히 적게 찍혀있음을 보아 기존에 오브젝트로 상태를 관리하던 때의 불필요한 리렌더링이 엄청 줄었음을 알 수 있다.