{"id":465,"date":"2020-03-13T21:05:27","date_gmt":"2020-03-13T12:05:27","guid":{"rendered":"https:\/\/blog.enyou.net\/?p=465"},"modified":"2020-04-21T13:17:37","modified_gmt":"2020-04-21T04:17:37","slug":"swiftui-collectionview","status":"publish","type":"post","link":"https:\/\/blog.enyou.net\/ko\/archives\/465","title":{"rendered":"SwiftUI CollectionView"},"content":{"rendered":"\n<p>SwiftUI\ub294 \ub300\ubd80\ubd84\uc758 UIKit\uc5d0\uc11c \uc4f0\ub358 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ubcf4\ub2e4 \ud3b8\ub9ac\ud558\uac8c \uc774\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc544\uc9c1 \uba87\uba87 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc740 \uad6c\ud604\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. SwiftUI\uc5d0\uc11c \uad6c\ud604\ub418\uc9c0 \uc54a\uc740 \ucef4\ud3ec\ub10c\ud2b8 \uc911 UIKit\uc5d0\uc11c \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud558\ub294 CollectionView\ub97c \uc5b4\ub5bb\uac8c SwiftUI \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc9c0 \uc54c\uc544\ubd05\uc2dc\ub2e4.<\/p>\n\n\n\n<p>\uc81c\uac00 \ucc3e\uc544\ub0b8 \ubc29\ubc95\uc740 \ub450 \uac00\uc9c0\uc785\ub2c8\ub2e4. \uccab \ubc88\uc9f8\ub85c\ub294 UIViewRepresentable\uc744 \uc774\uc6a9\ud558\ub294 \uac83\uc774\uba70, \ub450 \ubc88\uc9f8\ub294 SwiftUI\uc758 List\ub97c \uc774\uc6a9\ud55c \uac83 \uc785\ub2c8\ub2e4. ScrollView\uc640 VStack\uc73c\ub85c\ub3c4 \uc2a4\ud06c\ub864\ud558\uba74\uc11c \uc544\uc774\ud15c\uc758 \ubdf0\ub4e4\uc744 \ubcf4\uc5ec\uc904 \uc218 \uc788\uc9c0\ub9cc, \uc774 \uacbd\uc6b0 Cell Reuse\uac00 \ub418\uc9c0 \uc54a\uc73c\ubbc0\ub85c \ucd94\ucc9c\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 CollectionView\ub97c SwiftUI\uc5d0 \uc801\uc6a9\ud574\ubcf4\uace0, \uc544\uc774\ud15c\uc744 \ub20c\ub800\uc744 \ub54c, \ub124\ube44\uac8c\uc774\uc158 \ucee8\ud2b8\ub864\ub7ec \ud558\uc758 \ubdf0 \ucee8\ud2b8\ub864\ub7ec\uac00 \uc774\ub3d9\ud558\ub294 \uac83\uae4c\uc9c0 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">UIViewRepresentable\uc744 \uc774\uc6a9\ud558\ub294 \ubc29\ubc95<\/h2>\n\n\n\n<p>\uc560\ud50c\uc740 SwiftUI\ub97c \ubc1c\ud45c\ud558\uba70 SwiftUI\uc5d0\uc11c UIKit\uc758 View\uc640 ViewController\ub97c \uc784\ubca0\ub529\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d Representable\uc774\ub77c\ub294 Wrapper\ub97c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. SwiftUI\uc5d0\uc11c \uad6c\ud604\ub418\uc9c0 \uc54a\uc740 View(Controller)\uc744 UIKit\uc744 \ud1b5\ud574 \uc500\uc740 \ubb3c\ub860 \uae30\uc874\uc758 View(Controller)\ub97c \uc2e0\uc18d\ud558\uac8c SwiftUI\uc5d0\uc11c \uc7ac\ud65c\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>struct CollectionView: UIViewRepresentable {\n    var data = &#91;0,1,2,3,4,5,6,7,8,9]\n    \n    func makeUIView(context: Context) -> UICollectionView {\n\n    }\n    \n    func updateUIView(_ uiView: UICollectionView, context: Context) {\n\n    }\n}<\/code><\/pre>\n\n\n\n<p>\uba3c\uc800 UIViewRepresentable\uc758 \ubf08\ub300\ub97c \uc7a1\uc2b5\ub2c8\ub2e4. data\ub294 @Binding\uc744 \ud1b5\ud574\uc11c \ubc14\uc778\ub529\uc744 \ud1b5\ud574 \ubc1b\uc544\uc62c \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. makeView \ud568\uc218\uc5d0\uc11c UICollectionView\ub97c \ub9cc\ub4e4\uc5b4\uc90d\ub2c8\ub2e4. updateUIView\ub294 binding\ub41c \ub370\uc774\ud130\uac00 \ubcc0\ud654\ud560 \ub54c, \ubdf0\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uae30 \uc704\ud574 \ud638\ucd9c\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. data\ub97c @Binding\uc744 \ud1b5\ud574 \uc5f0\uacb0\ud588\ub2e4\uba74, uiView.reloadData() \ub4f1\uc744 \ud638\ucd9c\ud574\uc11c \ubdf0\ub97c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    func makeUIView(context: Context) -> UICollectionView {\n        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())\n        \n        collectionView.backgroundColor = .white\n        collectionView.dataSource = context.coordinator\n        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: \"Cell\")\n        \n        return collectionView\n    }<\/code><\/pre>\n\n\n\n<p>makeUIView \ud568\uc218\uc5d0\uc11c\ub294 \uceec\ub809\uc158 \ubdf0\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \uceec\ub809\uc158 \ubdf0\ub97c \ub9cc\ub4dc\ub294 \uac83\uacfc \ub2e4\ub97c \uac83\uc774 \uc5c6\uc9c0\ub9cc, UICollectionViewDataSource\ub97c context.coordinator\ub85c \uc9c0\uc815\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>func makeCoordinator() -> Coordinator {\n    Coordinator(self)\n}\n\nclass Coordinator: NSObject, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {\n\n}<\/code><\/pre>\n\n\n\n<p>ViewRepresentable \uc790\uc2e0\uc744 \uc778\uc790\ub85c \ubc1b\ub294 Coordinator\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. Coordinator\ub97c \ud1b5\ud574 CollectionView\uc758 \ucc44\ud0dd\ud55c DataSource\uc640 Delegate\ub97c \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    class Coordinator: NSObject, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {\n        private let parent: CollectionView\n        \n        init(_ collectionView: CollectionView) {\n            self.parent = collectionView\n        }\n        \n        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {\n            self.parent.books.count\n        }\n        \n        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {\n            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: \"Cell\", for: indexPath)\n            cell.backgroundColor = .blue\n            return cell\n        }\n        \n        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {\n            return CGSize(width: 100, height: 100)\n        }\n    }<\/code><\/pre>\n\n\n\n<p>Coordinator \ub0b4\ubd80\uc5d0\uc11c\ub294 ViewController\uc5d0\uc11c \uad6c\ud604\ud588\ub358 \uac83 \ucc98\ub7fc \uac01 \ub51c\ub9ac\uac8c\uc774\ud2b8\uc758 \ud568\uc218\ub97c \uad6c\ud604\ud574\uc8fc\uba74\ub429\ub2c8\ub2e4. \uc774 \ucf54\ub4dc\uc5d0\uc11c Coordinator\uc758 parent\ub294 ViewRepresentable\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774 \uc0c1\ud0dc\ub85c SwiftUI\uc758 \ucf54\ub4dc\uc5d0 ViewRepresentable\ub85c \uad6c\ud604\ud55c View\ub97c \ud638\ucd9c\ud558\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \ud45c\uc2dc\ub429\ub2c8\ub2e4\ub9cc, \uac01 \uc140\uc744 \ub204\ub974\uba74 \ub2e4\ub978 SwiftUI\uc758 View\ub85c \ub118\uc5b4\uac00\ub3c4\ub85d \ud558\uace0 \uc2f6\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9cc\uc57d Navigation View\uc5d0\uc11c View\ub97c \uc804\ud658\ud558\uace0 \uc2f6\ub2e4\uba74, SwiftUI\uc758 NavigationLink\ub97c \uc368\uc57c\ud558\ub294\ub370, \uc774\ub294 SiwftUI\uc758 \uc694\uc18c\uc774\ubbc0\ub85c NavigationController\uc5d0 ViewController\ub97c Push\ud558\ub294 \uac83\uacfc\ub294 \ub2e4\ub974\uac8c Coordinator\uc5d0\uc11c \uc9c1\uc811 \uc0ac\uc6a9\ud560 \uc218\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. @State \ubcc0\uc218\uc5d0 \ub530\ub77c NavigationLink\uac00 \uc791\ub3d9\ud558\uac8c \ud574\uc57c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @State var selection: Bool? = false\n    @State var itemIndex: Int?<\/code><\/pre>\n\n\n\n<p>CollectionView\uc758 \uc0c1\uc704 \ubdf0\uc5d0 @State variable\uc744 \uc120\uc5b8\ud569\ub2c8\ub2e4. selection\uc740 Navigation Link\uac00 \uc791\ub3d9\ud574\uc57c \ud558\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\ub294 \uc0c1\ud0dc \ubcc0\uc218\uc774\uba70, itemIndex\ub294 CollectionView\uc5d0\uc11c \uc5b4\ub5a4 \uc544\uc774\ud15c\uc744 \ud074\ub9ad\ud588\ub294\uc9c0 \uac00\uc838\uc62c \uc0c1\ud0dc \ubcc0\uc218\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>struct CollectionView: UIViewRepresentable {\n     var data = &#91;0, 1,2,3,4,5,6,7,8,9]\n     @Binding var selection: Bool?\n     @Binding var itemIndex: Int?\n\n    ...\n}<\/code><\/pre>\n\n\n\n<p>\ubc29\uae08 \ub9cc\ub4e0 CollectionView represntable\uc5d0 \ud574\ub2f9 \ubcc0\uc218\ub97c \ubc14\uc778\ub529 \uc2dc\ucf1c\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {\n            parent.itemIndex = indexPath.item\n            parent.selection = true\n        }<\/code><\/pre>\n\n\n\n<p>\ub51c\ub9ac\uac8c\uc774\ud2b8 \ud568\uc218\ub97c \ud1b5\ud574 \uc140\uc744 \ub20c\ub800\uc744 \ub54c, ViewRepresentable\uc758 \ubcc0\uc218 \uac12\uc744 \ubcc0\ud654\uc2dc\ud0b5\ub2c8\ub2e4. \uc774 \ubcc0\uc218\ub294 \ubc14\uc778\ub529 \ub418\uc5b4 \uc788\uc73c\ubbc0\ub85c, Reperesentable\uc758 \uc0c1\uc704 \ubdf0\ub85c \uc804\ub2ec\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        VStack{\n            NavigationLink(destination: AnotherView(), tag: true, selection: $selection, label: {EmptyView()})\n            CollectionView(selection: $selection, itemIndex: $itemIndex)\n        }<\/code><\/pre>\n\n\n\n<p>VStack\uc744 \uc774\uc6a9\ud574 CollectionView \uc704\uc5d0 \ub124\ube44\uac8c\uc774\uc158 \ub9c1\ud06c\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. destination\uc740 \ub20c\ub800\uc744 \ub54c \uc62e\uaca8\uac08 View\ub85c \ud569\ub2c8\ub2e4. tag\ub294 selection\uc5d0 \uc9c0\uc815\ub41c \ubcc0\uc218\uac00 tag\uc758 \uac12\uacfc \ub611\uac19\uc744 \ub54c, \ub9c1\ud06c\ub85c \uc774\ub3d9\ud568\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc2e4\uc81c\ub85c \uc774 \ub9c1\ud06c\ub294 \ub204\ub974\ub294 Link\uac00 \uc544\ub2c8\uae30 \ub54c\ubb38\uc5d0 \ube48 View\ub97c \ub0b4\uc6a9\ubb3c\ub85c \ud569\ub2c8\ub2e4. \uadf8\ub2e4\uc74c CollectionView\uc758 \uc778\uc790\ub97c \uc218\uc815\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ud568\uc73c\ub85c\uc368 \uc140\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \ubdf0\ub97c \uc774\ub3d9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">List\ub97c \uc774\uc6a9\ud558\ub294 \ubc29\ubc95<\/h2>\n\n\n\n<p>SwiftUI\uc5d0\uc11c\ub294 UIKit\uc758 Table View\uc640 \ube44\uc2b7\ud55c List\ub77c\ub294 View\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. List\ub294 ScrollView\uc640 \ub2e4\ub974\uac8c \uc548\uc5d0 \ub4e4\uc5b4\uac00\ub294 \uc140(\ubdf0)\ub97c \uc7ac\uc0ac\uc6a9\ud569\ub2c8\ub2e4. List\ub97c \uc774\uc6a9\ud558\uc5ec CollectionView\uc640 \ube44\uc2b7\ud558\uac8c \uc774\uc6a9\ud569\uc2dc\ub2e4.<\/p>\n\n\n\n<p>\uba3c\uc800 ViewModel\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc774\ub54c, ViewModel\uc5d0\uc11c \ud45c\uc2dc\ud558\uace0\uc790 \ud558\ub294 \ub370\uc774\ud130\ub97c 2\ucc28\uc6d0 \ubc30\uc5f4 \ud615\ud0dc\ub85c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class ViewModel: ObservableObject {\n    var items = &#91;&#91;0, 1], &#91;2, 3], &#91;4, 5]]\n}<\/code><\/pre>\n\n\n\n<p>\ub9ac\uc2a4\ud2b8 \uc548\uc5d0\uc11c ForEach \ubb38\uc744 \uc774\uc911\uc73c\ub85c \uc791\uc131\ud569\ub2c8\ub2e4. \uc989, CollectionView\uc640\ub294 \ub2e4\ub974\uac8c, row\ub2f9 \uc5ec\ub7ec \uc544\uc774\ud15c\uc744 ForEach\ubb38\uc744 \uc774\uc6a9\ud558\uc5ec \uadf8\ub9ac\ub294 \uac83 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>List {\n    ForEach(self.viewModel.items, id: \\.self) { row in\n        HStack {\n            ForEach(row, id: \\.self) { item in\n                Text(String(item))\n                    .frame(width: 180, height: 200)\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>\ubc29\uae08 \uc791\uc131\ud55c \uc140\uc758 \uc5ed\ud560\uc5d0 \ud574\ub2f9\ud558\ub294 TextView\ub97c \uafb8\ubbf8\uace0, \ud0ed \ud588\uc744 \ub54c\uc758 \ub3d9\uc791\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>List {\n    ForEach(self.viewModel.items, id: \\.self) { row in\n        HStack {\n            ForEach(row, id: \\.self) { item in\n                Text(String(item))\n                    .frame(width: 180, height: 200)\n                    .background(Color.green)\n                    .onTapGesture {\n                        self.selection = true\n                        self.itemIndex = item\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>\ub124\ube44\uac8c\uc774\uc158\ub9c1\ud06c\ub97c \uc774\uc6a9\ud574 CollectionView\uc758 \uacbd\uc6b0 \ucc98\ub7fc selection \uc5ec\ubd80\uc5d0 \ub530\ub77c \uc774\ub3d9\ud560 \ubdf0\uac00 \ubcf4\uc774\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>NavigationLink(destination: Text(String(self.itemIndex)), tag: true, selection: self.$selection, label: {EmptyView()})<\/code><\/pre>\n\n\n\n<p>\uc804\uccb4\uc801\uc778 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import SwiftUI\n\nclass ViewModel: ObservableObject {\n    var items = &#91;&#91;0, 1], &#91;2, 3], &#91;4, 5]]\n}\n\nstruct ExampleView: View {\n    @ObservedObject var viewModel = ViewModel()\n    @State var selection: Bool? = false\n    @State var itemIndex = 0\n    \n    var body: some View {\n        NavigationView {\n            VStack {\n                NavigationLink(destination: Text(String(self.itemIndex)), tag: true, selection: self.$selection, label: {EmptyView()})\n                List {\n                    ForEach(self.viewModel.items, id: \\.self) { row in\n                        HStack {\n                            ForEach(row, id: \\.self) { item in\n                                Text(String(item))\n                                    .frame(width: 180, height: 200)\n                                    .background(Color.green)\n                                    .onTapGesture {\n                                        self.selection = true\n                                        self.itemIndex = item\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>\ud544\uc694\uc5d0 \ub530\ub77c, ViewModel\uc758 \ub370\uc774\ud130\uac00 \ubcc0\ud558\uba74 \ubcc0\ud560 \ub54c \ub9c8\ub2e4 \ubc30\uc5f4\uc758 \uad6c\uc870\uc5d0 \ub9de\uac8c \ub370\uc774\ud130\ub97c \uc0ad\uc81c\/\ucd94\uac00 \ud574\uc8fc\uba74 ListView\ub97c CollectionView\ucc98\ub7fc \uc774\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular\"><div class=\"tiled-gallery__gallery\"><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.39.png?strip=info&amp;w=600&amp;ssl=1 600w,https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.39.png?strip=info&amp;w=900&amp;ssl=1 900w,https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.39.png?strip=info&amp;w=1118&amp;ssl=1 1118w\" alt=\"\" data-height=\"1962\" data-id=\"507\" data-link=\"https:\/\/blog.enyou.net\/archives\/465\/%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2020-04-17-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-8-32-39\" data-url=\"https:\/\/blog.enyou.net\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.39.png\" data-width=\"1118\" src=\"https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.39.png?ssl=1\"\/><\/figure><\/div><div class=\"tiled-gallery__col\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.48.png?strip=info&amp;w=600&amp;ssl=1 600w,https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.48.png?strip=info&amp;w=900&amp;ssl=1 900w,https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.48.png?strip=info&amp;w=1118&amp;ssl=1 1118w\" alt=\"\" data-height=\"1962\" data-id=\"508\" data-link=\"https:\/\/blog.enyou.net\/archives\/465\/%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2020-04-17-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-8-32-48\" data-url=\"https:\/\/blog.enyou.net\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.48.png\" data-width=\"1118\" src=\"https:\/\/i0.wp.com\/blog.enyou.kr\/wp-content\/uploads\/2020\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2020-04-17-\u110b\u1169\u1112\u116e-8.32.48.png?ssl=1\"\/><\/figure><\/div><\/div><\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SwiftUI\ub294 \ub300\ubd80\ubd84\uc758 UIKit\uc5d0\uc11c \uc4f0\ub358 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ubcf4\ub2e4 \ud3b8\ub9ac\ud558\uac8c \uc774\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc544\uc9c1 \uba87\uba87 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc740 \uad6c\ud604\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. SwiftUI\uc5d0\uc11c \uad6c\ud604\ub418\uc9c0 \uc54a\uc740 \ucef4\ud3ec\ub10c\ud2b8 \uc911 UIKit\uc5d0\uc11c \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud558\ub294 CollectionView\ub97c \uc5b4\ub5bb\uac8c SwiftUI \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc9c0 \uc54c\uc544\ubd05\uc2dc\ub2e4. \uc81c\uac00 \ucc3e\uc544\ub0b8 \ubc29\ubc95\uc740 \ub450 \uac00\uc9c0\uc785\ub2c8\ub2e4. \uccab \ubc88\uc9f8\ub85c\ub294 UIViewRepresentable\uc744 \uc774\uc6a9\ud558\ub294 \uac83\uc774\uba70, \ub450 \ubc88\uc9f8\ub294 SwiftUI\uc758 List\ub97c \uc774\uc6a9\ud55c \uac83 \uc785\ub2c8\ub2e4. ScrollView\uc640 VStack\uc73c\ub85c\ub3c4 \uc2a4\ud06c\ub864\ud558\uba74\uc11c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-465","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/posts\/465"}],"collection":[{"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/comments?post=465"}],"version-history":[{"count":6,"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/posts\/465\/revisions"}],"predecessor-version":[{"id":510,"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/posts\/465\/revisions\/510"}],"wp:attachment":[{"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/media?parent=465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/categories?post=465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.enyou.net\/ko\/wp-json\/wp\/v2\/tags?post=465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}