<div id="readability-page-1" class="page"><div id="ArticleView"> Compose의 특징은 작고 재사용 가능한 UI 조각들을 조립해서 화면을 구성하는 것입니다. UI 조각은 UI를 정의하는 함수인 컴포저블(Composable) 함수를 의미합니다.<h3>컴포저블 함수(Composable Function)</h3>컴포저블 함수는 컴포즈에서 UI를 그리는 가장 기본적인 블록입니다. 일반 함수 형태에 @Composable 애노테이션이 붙은 특수한 함수입니다. 당연히 일반 함수와 다른 점이 있습니다.다음과 같이 콘솔에 출력을 하는 일반 함수를 안드로이드 UI에 문자를 보여주는 컴포저블 함수로 변환하면 어떻게 될까요?@Composable 애노테이션을 선언하고 화면에 문자열을 표시하는 Text() 함수를 호출하면 됩니다.컴포저블 함수는 Compose 런타임이 최초 호출과 이후 재호출을 모두 관리합니다. 이것을 컴포지션(Composition)과 리컴포지션(Recomposition)이라고 합니다. 컴포지션은 UI가 처음 생성될 때, 컴포저블 함수들을 호출하며 UI 트리를 구축하는 과정입니다. 이때 Composer가 함수 호출 기록과 UI 구조를 슬롯 테이블(Slot Table)이라는 곳에 저장하여 전체 구조를 기억하는 UI 트리를 생성합니다. Compose 런타임은 Composer가 만들어낸 UI 트리를 가지고 실제 화면을 그려내는 전체 과정을 담당합니다. 정리하면 Compose 런타임은 컴포저블 함수를 실행하여 Composer가 UI 트리를 만들도록 하는 것입니다.리컴포지션은 상태가 변경되었을 때 발생합니다. Compose 런타임은 상태 변경을 감지하고 Composer를 통해 슬롯 테이블을 확인하여 변경된 부분과 관련된 컴포저블 함수만 효율적으로 다시 실행합니다. 덕분에 전체 UI를 새로 그리지 않고 필요한 부분만 최소한으로 갱신할 수 있습니다.이로 인해 생기는 컴포저블 함수의 특징이 있습니다. 바로 컴포저블 함수는 컴포저블 함수 내부에서만 호출할 수 있다는 것입니다. 왜 그럴까요? 일반 함수에는 앞서 살펴본 컴포저블 함수가 실행되는 특별한 환경이 없기 때문입니다. 이러한 환경을 컴포지션 콘텍스트라고 합니다. 따라서 컴포저블 함수를 아무 위치에서나 호출할 수 있게 두면 컴포지션 콘텍스트가 없기 때문에 UI 트리 구조와 상태 추적이 불가능합니다. 그래서 Compose 런타임은 컴포저블 함수 안에서만 다른 컴포저블 함수 호출을 허용합니다. 물론 컴포저블 함수 안에서 일반 함수 호출도 가능합니다.<h3>재사용성</h3>Compose의 특징은 컴포저블 함수들을 조립해서 화면을 구성하는 것입니다. 컴포저블 함수만이 컴포저블 함수를 호출할 수 있으니 복잡한 화면을 구성하기 위해서는 여러 컴포저블 함수들을 조립해야 합니다. 그래서 컴포저블 함수를 UI 조각으로 볼 수 있는 것이죠.Greeting() 내부의 Text()도 컴포저블 함수입니다. Text()는 Compose UI 툴킷 내의 Compose Material 라이브러리에 포함된 컴포저블 함수입니다. 따라서 컴포저블 함수가 아닌 곳에서는 호출이 불가능합니다. 이렇듯 Compose 자체적으로 제공하는 UI 컴포넌트가 컴포저블 함수로 제공되고 있기 때문에 이를 활용하여 화면을 구성하려면 컴포저블 함수라는 조각을 잘 조립해야 하는 겁니다.그러면 컴포저블 함수라는 작은 UI 조각을 조립하여 화면을 구성할 때 얻는 장점은 무엇일까요? 바로 재사용성이 높아진다는 것입니다. 하지만 단순히 컴포저블 함수를 사용한다고 해서 무조건 재사용성이 높아지는 것은 아닙니다. 재사용성을 높이는 방식으로 설계를 해야 됩니다.상태는 파라미터로 주입잘 설계된 컴포저블 함수는 외부 상태에 직접 의존하는 대신, 필요한 모든 데이터(상태)를 파라미터로 명시적으로 전달받습니다. 컴포저블 함수가 필요로 하는 데이터를 파라미터로만 전달하면 재사용성과 더불어 테스트 용이성도 극대화됩니다.<div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;https://t1.daumcdn.net/brunch/service/user/2Kn8/image/3V4-Otz0cIV5_OuW7PUYFlag9II.png&quot;,&quot;width&quot;:&quot;429&quot;,&quot;height&quot;:&quot;425&quot;,&quot;originalName&quot;:&quot;&quot;}]}"><img alt="" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=https://t1.daumcdn.net/brunch/service/user/2Kn8/image/3V4-Otz0cIV5_OuW7PUYFlag9II.png"> </div>어렵게 생각할 것이 아니라 Text() 함수만 봐도 알 수 있습니다.만약 Text() 함수가 text라는 String 타입의 파라미터를 받지 않고 내부에서 할당해서 사용한다면 데이터가 고정됩니다. 그러면 위 예제 코드처럼 FirstName() 함수와 LastName() 함수처럼 두 개의 컴포저블 함수에서 Text() 함수를 재사용할 수 없을 겁니다. 또한 상태를 UI로 변환하는 선언형 UI에 부합하지 않습니다.이상적인 컴포저블 함수는 순수 함수(Pure Function)처럼 동작합니다. 동일한 입력(파라미터)에 대해 항상 동일한 UI를 출력하며, 외부 상태를 변경하는 부수 효과(Side Effect)가 없습니다. 이는 '상태는 아래로, 이벤트는 위로(State flows down, events flow up)'라는 Compose의 단방향 데이터 흐름 원칙을 따르는 것입니다. 즉, 데이터는 항상 부모에서 자식으로 파라미터를 통해 전달됩니다.FirstName() 함수와 LastName() 함수에서도 상태(파라미터)를 Text()로 전달하고 있습니다. 또한 상태에 따라 표시되는 데이터가 다를 뿐이지 항상 같은 UI를 출력합니다. 문자열을 표시하는 UI죠.이벤트 콜백 전달재사용성을 높이기 위해서는 상태뿐만 아니라 클릭, 입력 등과 같은 이벤트도 외부에서 정의할 수 있도록 해야 합니다.<div data-app="{&quot;type&quot;:&quot;gridGallery&quot;,&quot;caption&quot;:&quot;&quot;,&quot;displayOption&quot;:&quot;InnerCenter&quot;,&quot;images&quot;:[{&quot;url&quot;:&quot;https://t1.daumcdn.net/brunch/service/user/2Kn8/image/kr5RFCXd8Yv3PVSeHIt0jLZO-LU.png&quot;,&quot;width&quot;:&quot;459&quot;,&quot;height&quot;:&quot;272&quot;,&quot;originalName&quot;:&quot;&quot;}]}"><img alt="" src="https://img1.daumcdn.net/thumb/R1280x0.fpng/?fname=https://t1.daumcdn.net/brunch/service/user/2Kn8/image/kr5RFCXd8Yv3PVSeHIt0jLZO-LU.png"> </div>사용자와 상호 작용하는 Button() 함수의 파라미터를 살펴보면 함수 타입 파라미터 onClick이 존재합니다.이렇게 하면 컴포저블 함수 자체는 화면을 그리는 일에만 집중할 수 있습니다. 주요 로직은 외부에서 주입한 이벤트를 통해 처리하면 됩니다. 이를 통해 재사용성이 증가합니다. 또한 다양한 동작을 처리할 수 있는 유연성도 갖추게 됩니다. 이러한 유연성을 갖추면 테스트 용이성도 증가합니다. UI는 고정되어 있고 이벤트만 Mock 객체 등으로 주입하면 되기 때문입니다. 사실 이런 장점들은 의존성 주입의 일반적인 장점과 같습니다.정리하면 상태는 파라미터로 내려받습니다. 이벤트 처리 함수(Callback)는 내려받지만 실제 이벤트는 위로 전달합니다. 이러한 구조 덕분에 컴포저블 함수는 순수하게 UI 처리만 담당하고 재사용성, 유연성, 테스트 용이성까지 얻을 수 있습니다.조합을 통한 재사용성재사용성이 높아진 컴포저블 함수는 다른 컴포저블 함수를 호출하여 더 큰 UI 조각을 만들 수 있습니다. 예를 들어 Text(), Icon(), Button()과 같이 가장 작고 독립적인 UI 조각(컴포저블 함수)을 만든 후 이를 조합하여 프로필 카드를 보여주는 UserProfile()과 같은 컴포저블 함수를 만들 수 있습니다. 더 간단하게는 앞선 예제의 FirstName() 함수와 LastName() 함수를 조합하여 FullName()이라는 컴포저블 함수를 만들 수 있습니다. </div></div>

서준수

Compose의 특징은 작고 재사용 가능한 UI 조각들을 조립해서 화면을 구성하는 것입니다. UI 조각은 UI를 정의하는 함수인 컴포저블(Composable) 함수를 의미합니다.  컴포저블 함수(Composable Function) 컴포저블 함수는 컴포즈에서 UI를 그리는 가장 기본적인 블록입니다. 일반 함수 형태에 @Composable 애노테이션이 붙은

Compose 컴포저블 함수

댓글