derivedStateOf의 진짜 의미

Compose API 중 ``derivedStateOf``라는 API가 있다. 이름만 보면 state로부터 다른 state를 만드는 함수인 것처럼 보인다. 왜냐면 공식 문서에도 그렇게 적혀있기 때문이다.

derivedStateOf: convert one or multiple state objects into another state

실제 의미

그러나 실제로는 output을 줄이는 최적화 API에 가깝다. Android developers 아티클의 예시를 통해 이해해 보자.

 

다음과 같은 로그인 UI가 있다. 서비스 정책적으로 username은 알파벳으로만 이루어질 수 있다고 하자. ``username``을 입력할 때 ``submitEnabled``의 변화는 다음과 같다.

여기까진 문제가 없다.

 

그런데 ``username``을 계속 입력하면, 같은 ``true`` 값이 여러 번 expose되고, 따라서 불필요한 recomposition이 여러 번 일어날 수 있다. 같은 state가 여러 번 쌓이는 게 문제.

이제 ``derivedStateOf``를 사용하여 중복 output을 줄여 보자. ``remember``와 함께 사용한다.

이제 ``username``에 따른 ``submitEnabled``의 변화를 보자.

같은 상태가 한 번만 쌓이는 것을 확인할 수 있다. 즉 ``derivedStateOf``는 input에 비해 output의 변화가 적을 때, output의 불필요한 변화를 줄이는 API이다.

사용 예시

리스트의 scoll position에 따라 맨 위로 가는 버튼을 보여준다고 하자. scroll position은 사용자의 스크롤에 따라 매우 자주 변할 수 있다. 하지만 버튼을 보여줄 지는 ``scrollPosition > 0``에 의해 계산되고, 이 값은 ``true`` 또는 ``false``의 두 가지밖에 없다. ``scrollPosition``이 0 이상이기만 하면 ``false``가 나오는데, 스크롤 위치가 변할 때마다 ``false``를 여러 번 계산할 필요가 없다.

 

따라서 이 경우에 ``derivedStateOf``를 사용하면 불필요한 state 계산을 줄일 수 있다.

참고자료

Jetpack Compose — When should I use derivedStateOf?

 

Compose의 부수 효과  |  Jetpack Compose  |  Android Developers