{"id":45775,"date":"2021-11-24T12:49:57","date_gmt":"2021-11-24T03:49:57","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45775"},"modified":"2021-11-24T12:49:59","modified_gmt":"2021-11-24T03:49:59","slug":"migrating-to-jetpack-compose-%ec%95%88%eb%85%95-%ec%bb%b4%ed%8f%ac%ec%a6%88","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45775","title":{"rendered":"Migrating to Jetpack Compose – \uc548\ub155, \ucef4\ud3ec\uc988!"},"content":{"rendered":"\n

\uc2dd\ubb3c \uc138\ubd80 \uc815\ubcf4 \ud654\uba74\uc5d0\uc11c \uc804\uccb4 \ud654\uba74 \uad6c\uc870\ub294 \uadf8\ub300\ub85c \ub450\uace0 \uc2dd\ubb3c\uc5d0 \ub300\ud55c \uc124\uba85\uc744 \ucef4\ud3ec\uc988\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud558\ub824 \ud55c\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uacc4\ud68d \uc139\uc158<\/a>\uc5d0\uc11c \uc5b8\uae09\ub41c ‘\ucef4\ud3ec\uc988 \ubc0f View \ud568\uaed8 \uc0ac\uc6a9\ud558\uae30’ \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc804\ub7b5\uc744 \ub530\ub974\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n

\ucef4\ud3ec\uc988\ub294 UI\ub97c \ub80c\ub354\ub9c1\ud558\uae30 \uc704\ud574 \ud638\uc2a4\ud2b8 \uc561\ud2f0\ube44\ud2f0 \ub610\ub294 \ud504\ub808\uadf8\uba3c\ud2b8\uac00 \ud544\uc694\ud558\ub2e4. Sunflower\uc5d0\uc11c\ub294 \ubaa8\ub4e0 \ud654\uba74\uc774 \ud504\ub808\uadf8\uba3c\ud2b8\ub97c \uc0ac\uc6a9\ud558\ubbc0\ub85c setContent \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec Compose UI \ucf58\ud150\uce20\ub97c \ud638\uc2a4\ud305\ud560 \uc218 \uc788\ub3c4\ub85d, Android View\uc778 ComposeView<\/a>\ub97c \uc0ac\uc6a9\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n

XML \ucf54\ub4dc\ub97c \uc81c\uac70\ud558\uae30<\/h2>\n\n\n\n

\ub9c8\uc774\uadf8\ub808\uc774\uc158\uc744 \uc2dc\uc791\ud574\ubcf4\uc790! fragment_plant_detail.xml\uc744 \uc5f4\uace0 \ub2e4\uc74c \uc791\uc5c5\uc744 \uc218\ud589\ud558\uc790.<\/p>\n\n\n\n

  1. Code \ubdf0\ub85c \ubcc0\uacbd\ud55c\ub2e4.<\/li>
  2. NestedScrollView \ub0b4\uc5d0\uc11c ConstraintLayout \ucf54\ub4dc\uc640 \uc911\ucca9\ub41c TextView\ub4e4\uc744 \uc81c\uac70\ud55c\ub2e4.
    (\ucf54\ub4dc\ub7a9\uc5d0\uc11c\ub294 \uac1c\ubcc4 \ud56d\ubaa9\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud560 \ub54c, XML \ucf54\ub4dc\ub97c \ube44\uad50\ud558\uace0 \ucc38\uc870\ud558\ubbc0\ub85c \ucf54\ub4dc\ub97c \uc8fc\uc11d \ucc98\ub9ac\ud558\uba74 \uc720\uc6a9\ud558\ub2e4)<\/li>
  3. compose_view\ub97c View ID\ub85c \uc0ac\uc6a9\ud558\ub294 \ub300\uc2e0, \ucef4\ud3ec\uc988 \ucf54\ub4dc\ub97c \ud638\uc2a4\ud305\ud560 ComposeView\ub97c \ucd94\uac00\ud55c\ub2e4.<\/li><\/ol>\n\n\n\n

    fragment_plant_detail.xml<\/h4>\n\n\n\n
    <androidx.core.widget.NestedScrollView\n\u00a0 \u00a0 android:id=\"@+id\/plant_detail_scrollview\"\n\u00a0 \u00a0 android:layout_width=\"match_parent\"\n\u00a0 \u00a0 android:layout_height=\"match_parent\"\n\u00a0 \u00a0 android:clipToPadding=\"false\"\n\u00a0 \u00a0 android:paddingBottom=\"@dimen\/fab_bottom_padding\"\n\u00a0 \u00a0 app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\">\n\n\u00a0 \u00a0 \/\/ Step 2) ConstraintLayout \ubc0f \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uc8fc\uc11d\ucc98\ub9ac \ud55c\ub2e4.\n\u00a0 \u00a0 <androidx.constraintlayout.widget.ConstraintLayout\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_width=\"match_parent\"\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_height=\"match_parent\"\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_margin=\"@dimen\/margin_normal\">\n\n\u00a0 \u00a0 \u00a0 \u00a0 <TextView\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 android:id=\"@+id\/plant_detail_name\"\n\u00a0 \u00a0 \u00a0 \u00a0 ...\n\u00a0 \u00a0 \n\u00a0 \u00a0 <\/androidx.constraintlayout.widget.ConstraintLayout>\n\u00a0 \u00a0 \/\/ End Step 2) \uc8fc\uc11d\ucc98\ub9ac\ub97c \uc5ec\uae30\uae4c\uc9c0 \ud55c\ub2e4.\n\n\u00a0 \u00a0 \/\/ Step 3) ComposeView\ub97c \ucd94\uac00\ud558\uc5ec \ucef4\ud3ec\uc988 \ucf54\ub4dc\ub97c \ud638\uc2a4\ud305\ud55c\ub2e4.\n\u00a0 \u00a0 <androidx.compose.ui.platform.ComposeView\n\u00a0 \u00a0 \u00a0 \u00a0 android:id=\"@+id\/compose_view\"\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_width=\"match_parent\"\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_height=\"match_parent\"\/>\n\n<\/androidx.core.widget.NestedScrollView><\/code><\/pre>\n\n\n\n
    \ucef4\ud3ec\uc988 \ucf54\ub4dc \ucd94\uac00\ud558\uae30<\/h2>\n\n\n\n
    \uc774\uc81c \uc2dd\ubb3c \uc138\ubd80 \uc815\ubcf4 \ud654\uba74\uc744 \ucef4\ud3ec\uc988\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud560 \uc900\ube44\uac00 \ub418\uc5c8\ub2e4!<\/p>\n\n\n\n
    \ucf54\ub4dc\ub7a9 \uc804\uccb4\uc5d0\uc11c, plantdetail \ud3f4\ub354 \uc544\ub798\uc758 PlantDetailDescription.kt \ud30c\uc77c\uc5d0 Compose \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uac8c \ub41c\ub2e4. \uadf8\uac83\uc744 \uc5f4\uace0 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc774\ubbf8 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 placeholder\uc778 “Hello Compose!” \ud14d\uc2a4\ud2b8\ub97c \uc5b4\ub5bb\uac8c \uac00\uc9c0\uace0 \uc788\ub294\uc9c0 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n
    plantdetail\/PlantDetailDescription.kt<\/h4>\n\n\n\n
    @Composable
    fun PlantDetailDescription() {
        Text(\"Hello Compose\")
    }<\/code><\/pre>\n\n\n\n
    \uc774\uc804 \ub2e8\uacc4\uc5d0\uc11c \ucd94\uac00\ud55c ComposeView\uc5d0\uc11c \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \ud638\ucd9c\ud558\uc5ec \ud654\uba74\uc5d0 \ud45c\uc2dc\ud574\ubcf4\uc790. plantdetail\/PlantDetailFragment.kt\ub97c \uc5f4\uc790.<\/p>\n\n\n\n
    \ud654\uba74\uc5d0 \ub370\uc774\ud130 \ubc14\uc778\ub529<\/a>\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\uc73c\ubbc0\ub85c, composeView\uc5d0 \uc9c1\uc811 \uc561\uc138\uc2a4\ud558\uace0 setContent\ub97c \ud638\ucd9c\ud558\uc5ec \ud654\uba74\uc5d0 Compose \ucf54\ub4dc\ub97c \ud45c\uc2dc\ud560 \uc218 \uc788\ub2e4. Sunflower\ub294 \uba38\ud2f0\ub9ac\uc5bc \ub514\uc790\uc778\uc744 \uc0ac\uc6a9\ud558\ubbc0\ub85c MaterialTheme \ub0b4\uc5d0\uc11c PlantDetailDescription \ucef4\ud3ec\uc800\ube14\uc744 \ud638\ucd9c\ud55c\ub2e4.<\/p>\n\n\n\n
    plantdetail\/PlantDetailFragment.kt<\/h4>\n\n\n\n
    class PlantDetailFragment : Fragment() {
        ...
        override fun onCreateView(...): View? {
            val binding = DataBindingUtil.inflate<FragmentPlantDetailBinding>(
                inflater, R.layout.fragment_plant_detail, container, false
            ).apply {
                ...
                composeView.setContent {
                    \/\/ You're in Compose world!
                    MaterialTheme {
                        PlantDetailDescription()
                    }
                }
            }
            ...
        }
    }<\/code><\/pre>\n\n\n\n
    Note<\/strong>: Sunflower\ub294 \uc0c9\uc0c1, \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ubc0f \ubaa8\uc591\uc5d0 \ub300\ud574 \uba38\ud2f0\ub9ac\uc5bc \ub514\uc790\uc778\uc744 \uc0ac\uc6a9\ud558\ubbc0\ub85c \ud569\ub9ac\uc801\uc778 \uae30\ubcf8\uac12\uc744 \uc81c\uacf5\ud558\ub294 MaterialTheme \ucef4\ud3ec\uc800\ube14\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. \uadf8\ub7ec\ub098 \uc6d0\ud558\ub294 \uacbd\uc6b0 \uace0\uc720\ud55c \ud14c\ub9c8 \uc2dc\uc2a4\ud15c\uc744 \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\ub2e4. \ud14c\ub9c8\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \uacf5\uc2dd\ubb38\uc11c\ub97c \ud655\uc778\ud558\ub3c4\ub85d \ud558\uc790.<\/p><\/blockquote>\n\n\n\n
    \uc571\uc744 \uc2e4\ud589\ud558\uba74 “Hello Compose!”\uac00 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub41c\ub2e4.<\/p>\n\n\n\n
    \"abb6b7763cc36838.png\"<\/figure><\/div>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    \uc2dd\ubb3c \uc138\ubd80 \uc815\ubcf4 \ud654\uba74\uc5d0\uc11c \uc804\uccb4 \ud654\uba74 \uad6c\uc870\ub294 \uadf8\ub300\ub85c \ub450\uace0 \uc2dd\ubb3c\uc5d0 \ub300\ud55c \uc124\uba85\uc744 \ucef4\ud3ec\uc988\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158\ud558\ub824 \ud55c\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uacc4\ud68d \uc139\uc158\uc5d0\uc11c \uc5b8\uae09\ub41c ‘\ucef4\ud3ec\uc988 \ubc0f View \ud568\uaed8 \uc0ac\uc6a9\ud558\uae30’ \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc804\ub7b5\uc744 \ub530\ub974\uac8c \ub41c\ub2e4. \ucef4\ud3ec\uc988\ub294 UI\ub97c \ub80c\ub354\ub9c1\ud558\uae30 \uc704\ud574 \ud638\uc2a4\ud2b8 \uc561\ud2f0\ube44\ud2f0 \ub610\ub294 \ud504\ub808\uadf8\uba3c\ud2b8\uac00 \ud544\uc694\ud558\ub2e4. Sunflower\uc5d0\uc11c\ub294 \ubaa8\ub4e0 \ud654\uba74\uc774 \ud504\ub808\uadf8\uba3c\ud2b8\ub97c \uc0ac\uc6a9\ud558\ubbc0\ub85c setContent \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec Compose UI \ucf58\ud150\uce20\ub97c \ud638\uc2a4\ud305\ud560 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45775"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45775"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45775\/revisions"}],"predecessor-version":[{"id":45777,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45775\/revisions\/45777"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}