กายวิภาคของฟังก์ชัน @Composable

A Composable is just a Kotlin function that describes a piece of UI. Call it, and Compose draws that UI on screen. It is the building block of everything. 🧱

The magic marker is @Composable above the function. It tells the Compose compiler this function can emit UI and may be recomposed when data changes.

By convention, Composable names use PascalCase nouns like Greeting or ProfileCard, not verbs. The name describes the thing on screen, not an action.

A Composable usually returns nothing (Unit). Instead of returning UI, it emits it by calling other Composables inside its body. The side effect is the drawing.

Compose ships ready-made Composables like Text, Button, Image, and Icon. You combine these to build your own, so you rarely start from a blank canvas.

Composables take parameters just like any function. Pass data in, and the UI reflects it. This is how the same component shows different content.

Most Composables accept a modifier to control size, padding, and layout. By convention it is the first optional parameter, ready for you to customize.

A Composable can only be called from another Composable. This rule lets Compose track the tree of UI and recompose the right parts when state changes.

Aim for small, focused Composables that do one thing. Tiny pieces are easier to reuse, preview, and combine into bigger screens later on.

A good Composable is predictable: same inputs, same UI. Avoid surprises like network calls in the body, since Compose may run it many times.

As Composables call each other, they form a UI tree. Compose walks this tree to draw the screen and to update only the branches that changed.

Let's verify what marks a function as a UI builder.

A Composable is a Kotlin function with @Composable that emits UI, takes parameters, accepts a modifier, and calls other Composables to build a tree.