현재 운영하고 있는 앱의 사용성을 개선하기 위해 렌더링 최적화 작업을 수행해 보았다.
Jetpack Compose는 선언형 UI 방식이기 때문에 상태 흐름과 컴포넌트 간의 책임 분리가 매우 중요하다. 잘못된 설계는 불필요한 리렌더링을 발생시켜, 앱의 성능에 직접적인 영향을 준다.
Compose에서 렌더링 효율을 측정할 때는 Recomposition count를 활용한다. 렌더링이 한번 발생할 때마다 Recomposition count가 1씩 증가하는 형태이다.
나는 이번에 렌더링 최적화를 위해 TextField 로직 일부를 변경했다.
문제 정의
가장 많은 이벤트가 발생하는 앱의 핵심 화면에 대해 렌더링 성능을 측정했다. 해당 화면은 사용자 인터랙션이 많고 Recomposition이 발생할 여지가 많은 화면이다.
측정 플로우는 다음과 같다.
1. 텍스트 필드 활성화 -> "할 일 생성 후 프로파일링 툴로 결과 확인" 할 일 생성
2. 리스트 최하단 까지 스크롤
3. 마지막 할 일 아이템 왼쪽으로 스와이프(리스트에서 제거)
결과는??
심각했다. 할 일을 생성하는 과정에서 전체 화면이 45번 리렌더링 된 것이다.
기존 상태 흐름
현재 화면 구조도를 간략하게 그리면 다음과 같다.
요약하자면, 텍스트 필드에 입력되는 값을 직접 활용하는 요소는 자식 컴포넌트인 CreateBacklogTextField 하나뿐이다. 하지만 잘못된 설계로 인해서 불필요하게 부모 컴포넌트까지 모두 리렌더링되고 있다.
이를 해결하기 위해서는 하위 컴포넌트에서만 사용하는 상태 변수를 전체 상태 변수와 분리하여, 컴포넌트 내부에서 관리하도록 해야 한다.
개선된 상태 흐름
개선 후 화면 구조도는 다음과 같다.
기존과는 다르게 텍스트 필드 상태 변수를 내부에서 로컬 처리하여 부모 컴포넌트를 리렌더링 범주에서 제거하였다.
이렇게 수정한 후 렌더링 성능을 다시 측정했더니...
Recomposition count가 크게 줄었다. 비교적 단순하고 쉬운 최적화 작업이었지만 이 정도로 성과를 낼 수 있다는 것이 놀랍다. 아직 개선할 부분이 많기 때문에 좀 더 어렵고 복잡한 최적화도 수행해 보고 싶다
쫌 간지네