How to Composable function

Lee Sanghyun·2024년 4월 5일

목록 보기

2/3

이 글은 ANDROID 개발자를 위한 JETPACK COMPOSE 코스를 바탕으로 작성되었습니다.

Composable function

코틀린에서 이것이 Compose UI 함수입니다라는 것을 알리기 위해서는 @Composable 어노테이션을 붙이기만 하면 됩니다. 그렇게 되면 Compose 컴파일러가 자동으로 이 함수의 Data를 UI로 전환시켜 버립니다. 이런 함수를 Composable function 짧게는 Composable이라고 부릅니다. 이런 어노테이션을 이용하는 방식은 굉장히 쉽고 빠르며 재사용성을 올려줍니다.

특히 코틀린 코드로 작성할 수 있다는 점이 강력한 장점입니다. 예를 들면 XML에서는 불가능하던 For-Each문과 같은 반복문을 사용해서 여러 UI 요소를 손쉽게 생성할 수 있습니다. 혹은 If문을 사용하면 상태에 따라서 다른 UI 요소를 생성할 수도 있습니다.

// For example... Just put annotation on it!
@Composable
fun GreetingForEach(names: List<String>) {
    Column {
        names.forEach { name ->
            Greeting(name = name)
        }
    }
}

Recomposition

만약에 지금 그려진 UI을 수정해야 된다면, 단순히 함수에 다른 값을 넣어서 다시 실행하거나 혹은 함수 내부 상태를 변경하면 UI는 다시 그려집니다. 이것을 Recomposition이라고 합니다. 내부 상태를 변경하고 이 사실을 관찰하기 위해서는 우리는 Mutable State를 사용해야 하는데 Mutable State는 Kotlin 런타임과 통합되어 있는 변경 가능한 Object입니다.

개인적으로 생각했을 때 Compose와 XML을 통한 UI 구현의 제일 큰 차이점은 바로 수동적으로 UI를 업데이트해주지 않아도 된다는 것이다. 예를 들어서 XML의 EditText의 Text가 변경될 때마다 TextVeiw의 Text를 업데이트 해주려 한다면, findViewById()를 통해서 EditText와 TextView를 불러오고 onTextChanged()를 구현해서 원하는 문자열을 TextView.setText()에 인자로 넘겨줘야 한다. 이것을 수동적인 업데이트라고 한다면, Compose에서는 내부 상태가 변경되기만 한다면 자동으로 UI를 다시 그려준다. 즉 상태의 변화에 따라서 자동으로 업데이트가 이루어진다는 것이다. XML을 이용하던 입장에서는 신세계를 경험하는 듯한 편리함이었다.

Recomposition 주의사항

다만 마법과 같이 Composable 내부에 변수를 생성해서 사용하는데 Recomposition 이후에도 변수 값이 보존되는 것은 아니다. 예를 들어서 MuatbleState()을 선언하고 Text 값을 저장하는데 사용했다면 Recomposition 이후에는 MutableState가 처음 정의된대로 초기화된다. 함수가 처음부터 다시 시작이라고 생각하면 되겠다. 이를 방지하기 위해서 이번 강의에서는 rememeberSaveable()과 remember을 사용해서 MutableState()가 Recompostion 이후에도 값을 보존할 수 있도록 프로그래밍한 것을 볼 수 있었다.

또 Recomposition은 편리한 기능이지만 그렇다고 남용해서는 안 된다고 강의에서 말하고 있다. UI를 처음부터 끝까지 다시 그린다는 것은 많은 자원을 잡아먹는 일이기 때문에 필요한 부분만을 업데이트하는 것이 중점인 것 같다. 특히 애니메이션과 같이 매 프레임마다 Recomposition이 필요하다면 Composable의 업데이트 부분을 가능한 좁게 하여서 속도를 보장해야 한다. 그렇지 않으면 하나의 Recomposition이 완료되기 전에 다음 Recomposition을 위해서 현재 Recomposition을 취소하기 때문에, 프레임이 드랍될 수도 있다.