{"id":25780,"date":"2024-10-27T05:48:49","date_gmt":"2024-10-27T05:48:49","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25780"},"modified":"2024-11-26T07:57:15","modified_gmt":"2024-11-26T07:57:15","slug":"%ec%8a%a4%ec%9c%84%ed%94%84%ed%8a%b8%eb%a1%9c-swiftui-%eb%b0%a9%ec%8b%9d%ec%9d%98-%ec%95%84%ec%9d%b4%ed%8f%b0-%ec%95%b1-%ea%b0%9c%eb%b0%9c-%eb%82%a0%ec%a7%9c-%ec%84%a0%ed%83%9d%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25780\/","title":{"rendered":"\uc2a4\uc704\ud504\ud2b8\ub85c SwiftUI \ubc29\uc2dd\uc758 \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c: \ub0a0\uc9dc \uc120\ud0dd\ud558\uae30 \uc704\ud55c \ub370\uc774\ud2b8 \ud53c\ucee4 \uc0ac\uc6a9\ubc95"},"content":{"rendered":"

<\/p>\n

\uc6b0\ub9ac\uc758 \uc77c\uc0c1 \uc0dd\ud65c\uc5d0\uc11c \ub0a0\uc9dc \uc120\ud0dd\uc740 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \uc5ec\ub7ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud0dc\uc5b4\ub09c \ub0a0\uc9dc, \uc77c\uc815, \uc608\uc57d \ubc0f \uae30\ud0c0 \uc5ec\ub7ec \uc0c1\ud669\uc5d0\uc11c \ub0a0\uc9dc\ub97c \uc5bb\ub294 \uac83\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc624\ub298\uc740 SwiftUI\ub97c \uc0ac\uc6a9\ud558\uc5ec iPhone \uc571 \uac1c\ubc1c\uc5d0\uc11c \ub370\uc774\ud2b8 \ud53c\ucee4 (DatePicker)<\/strong>\ub97c \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud560 \uac83\uc778\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. SwiftUI\uc758 \uc774\ud574<\/h2>\n

SwiftUI\ub294 Apple\uc774 \uac1c\ubc1c\ud55c \ucd5c\uc2e0 UI \ud504\ub808\uc784\uc6cc\ud06c\ub85c, iOS, macOS, watchOS \ubc0f tvOS\uc6a9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. SwiftUI\ub294 \uc120\uc5b8\uc801 \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud558\uba70, \uc774\ub97c \ud1b5\ud574 UI\ub97c \uac04\ud3b8\ud558\uac8c \ub9cc\ub4e4\uace0 \ub370\uc774\ud130\ub97c \uc0c1\ud0dc \uae30\ubc18\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

1.1 Declarative Syntax<\/h3>\n

SwiftUI\ub294 \uc989\uac01\uc801\uc778 UI \uc5c5\ub370\uc774\ud2b8\ub97c \uc9c0\uc6d0\ud558\ub294 \uc120\uc5b8\uc801 \uad6c\ubb38\uc744 \ub530\ub985\ub2c8\ub2e4. \uc989, UI\uc758 \uc0c1\ud0dc\uc5d0 \ub530\ub77c \ubdf0\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 \uc811\uadfc \ubc29\uc2dd\uc740 \ucf54\ub4dc\uac00 \ub354 \uba85\ud655\ud558\uace0 \uc720\uc9c0 \uad00\ub9ac\uac00 \uc26c\uc6cc\uc9c0\uba70, \ub370\uc774\ud130\uc640 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \uac04\uc758 \ub3d9\uae30\ud654\uac00 \uc6d0\ud65c\ud558\uac8c \uc9c4\ud589\ub429\ub2c8\ub2e4.<\/p>\n

2. \ub0a0\uc9dc\uc640 \uc2dc\uac04\uc758 \uc911\uc694\uc131<\/h2>\n

\ub0a0\uc9dc\uc640 \uc2dc\uac04\uc740 \uac70\uc758 \ubaa8\ub4e0 \uc571\uc5d0\uc11c \uc911\uc694\ud55c \uc815\ubcf4\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ub0a0\uc9dc\ub97c \uc120\ud0dd\ud558\uc5ec \uc774\ubca4\ud2b8\ub97c \uc608\uc57d\ud558\uac70\ub098 \uc784\ubc15\ud55c \uae30\ud55c\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \ud2b9\ud788 \uac15\uc88c, \uc608\uc57d \uc2dc\uc2a4\ud15c \ubc0f \ud589\uc0ac \uad00\ub9ac \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ub0a0\uc9dc \uc120\ud0dd\uc740 \ud544\uc218 \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n

3. SwiftUI\uc758 \ub370\uc774\ud2b8 \ud53c\ucee4 \uc0ac\uc6a9\ud558\uae30<\/h2>\n

SwiftUI\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ub370\uc774\ud2b8 \ud53c\ucee4\ub294 \uc0ac\uc6a9\uc790\uac00 \ub0a0\uc9dc\uc640 \uc2dc\uac04\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0\uc11c\ub294 \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \ud65c\uc6a9\ud558\uc5ec \ub0a0\uc9dc \uc120\ud0dd\uae30\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

3.1 \uae30\ubcf8 \ub370\uc774\ud2b8 \ud53c\ucee4 \uc0dd\uc131\ud558\uae30<\/h3>\n

\ub370\uc774\ud2b8 \ud53c\ucee4\uc758 \uae30\ubcf8\uc801\uc778 \uc0ac\uc6a9\ubc95\uc740 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4. SwiftUI\uc5d0\uc11c \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 DatePicker<\/code>\ub97c \ubdf0\uc5d0 \ucd94\uac00\ud558\uba74 \ub429\ub2c8\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub97c \uae30\ubc18\uc73c\ub85c \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n

import SwiftUI\n\n    struct ContentView: View {\n        @State private var selectedDate = Date()\n\n        var body: some View {\n            VStack {\n                Text(\"\uc120\ud0dd\ub41c \ub0a0\uc9dc: \\(selectedDate, formatter: DateFormatter())\")\n                    .font(.headline)\n                    .padding()\n\n                DatePicker(\"\ub0a0\uc9dc \uc120\ud0dd\ud558\uae30\", selection: $selectedDate, displayedComponents: [.date])\n                    .datePickerStyle(GraphicalDatePickerStyle())\n                    .padding()\n            }\n        }\n    }\n\n    struct ContentView_Previews: PreviewProvider {\n        static var previews: some View {\n            ContentView()\n        }\n    }<\/code><\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 \uae30\ubcf8\uc801\uc778 \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \uc0dd\uc131\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4. @State<\/code> \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc120\ud0dd\ub41c \ub0a0\uc9dc\ub97c \uae30\ub85d\ud558\uba70, \uc0ac\uc6a9\uc790\uac00 \ub0a0\uc9dc\ub97c \uc120\ud0dd\ud560 \ub54c\ub9c8\ub2e4 \uc774 \uac12\uc774 \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4. DatePicker<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub0a0\uc9dc\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uac8c \ud558\uace0, \uc774\ub97c \ud45c\uc2dc\ud558\uae30 \uc704\ud574 \ud14d\uc2a4\ud2b8 \ubdf0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
3.2 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc2a4\ud0c0\uc77c \uc801\uc6a9\ud558\uae30<\/h3>\n
SwiftUI\uc758 \ub370\uc774\ud2b8 \ud53c\ucee4\ub294 \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. .datePickerStyle()<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uadf8\ub798\ud53d \ub610\ub294 \ucef4\ud329\ud2b8 \ubaa8\ub4dc\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c\uc740 \ucef4\ud329\ud2b8 \uc2a4\ud0c0\uc77c\uc758 \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \uc0dd\uc131\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4:<\/p>\n
DatePicker(\"\ub0a0\uc9dc \uc120\ud0dd\ud558\uae30\", selection: $selectedDate, displayedComponents: [.date])\n        .datePickerStyle(WheelDatePickerStyle())\n        .padding()<\/code><\/pre>\n
\uac01 \uc2a4\ud0c0\uc77c\uc740 \uc0ac\uc6a9\uc790\uc758 \ud544\uc694\uc5d0 \ub530\ub77c \ucee4\uc2a4\ud130\ub9c8\uc774\uc988\ud560 \uc218 \uc788\uc73c\uba70, \uc571\uc758 \ucee8\ud14d\uc2a4\ud2b8\uc5d0 \ub9de\uac8c \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.3 \uc2dc\uac04 \uc120\ud0dd\ud558\uae30<\/h3>\n
\ub370\uc774\ud2b8 \ud53c\ucee4\ub294 \ub0a0\uc9dc\ubfd0\ub9cc \uc544\ub2c8\ub77c \uc2dc\uac04\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \uae30\ub2a5\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc2dc\uac04\uc744 \uc120\ud0dd\ud558\ub3c4\ub85d \ud558\ub824\uba74 displayedComponents<\/code> \ub9e4\uac1c\ubcc0\uc218\uc5d0 .hourAndMinute<\/code>\ub97c \ucd94\uac00\ud558\uba74 \ub429\ub2c8\ub2e4. \uc544\ub798\ub294 \uc2dc\uac04\uacfc \ub0a0\uc9dc\ub97c \ud568\uaed8 \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4:<\/p>\n
DatePicker(\"\ub0a0\uc9dc \ubc0f \uc2dc\uac04 \uc120\ud0dd\ud558\uae30\", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])\n        .datePickerStyle(GraphicalDatePickerStyle())\n        .padding()<\/code><\/pre>\n
4. \ub0a0\uc9dc \ud3ec\ub9f7\uc744 \ub2e4\ub8e8\ub294 \ubc29\ubc95<\/h2>\n
\uc0ac\uc6a9\uc790\uac00 \uc120\ud0dd\ud55c \ub0a0\uc9dc\ub97c \ud2b9\uc815 \ud615\uc2dd\uc73c\ub85c \ud45c\uc2dc\ud574\uc57c \ud560 \uacbd\uc6b0 DateFormatter<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \ucf54\ub4dc\ub294 \ub0a0\uc9dc\ub97c \uae00\uc790\ub85c \ud3ec\ub9f7\ud558\ub294 \uc608\uc785\ub2c8\ub2e4:<\/p>\n
let dateFormatter: DateFormatter = {\n        let formatter = DateFormatter()\n        formatter.dateStyle = .medium\n        formatter.timeStyle = .short\n        return formatter\n    }()<\/code><\/pre>\n
\uc774 \ud3ec\ub9f7\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub0a0\uc9dc\ub97c \uc0ac\ub78c \uce5c\ud654\uc801\uc778 \ud615\uc2dd\uc73c\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
5. \ub370\uc774\ud130 \uc720\ud6a8\uc131 \uccb4\ud06c<\/h2>\n
\uc0ac\uc6a9\uc790\uac00 \uc798\ubabb\ub41c \ub0a0\uc9dc\ub97c \uc785\ub825\ud558\uc9c0 \uc54a\ub3c4\ub85d \uc720\ud6a8\uc131 \uccb4\ud06c\ub97c \ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud2b9\uc815 \ubc94\uc704\uc758 \ub0a0\uc9dc\ub9cc \uc120\ud0dd\ud560 \uc218 \uc788\ub3c4\ub85d \uc81c\ud55c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 minimumDate<\/code>\uc640 maximumDate<\/code> \uc18d\uc131\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798 \uc608\uc81c\uc5d0\uc11c\ub294 2023\ub144 \ucd08\ubc18\ubd80\ud130 \ud604\uc7ac \ub0a0\uc9dc \uc0ac\uc774\uc758 \ub0a0\uc9dc\ub9cc \uc120\ud0dd \uac00\ub2a5\ud558\uac8c \uc124\uc815\ud558\uc600\uc2b5\ub2c8\ub2e4:<\/p>\n
DatePicker(\"\ub0a0\uc9dc \uc120\ud0dd\ud558\uae30\", selection: $selectedDate, in: Date()...Date().addingTimeInterval(60 * 60 * 24 * 30), displayedComponents: [.date])\n    .datePickerStyle(WheelDatePickerStyle()).padding()<\/code><\/pre>\n
6. \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \ud65c\uc6a9\ud55c \uc571 \ub514\uc790\uc778<\/h2>\n
\ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc571\uc758 \ub514\uc790\uc778\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uc5d0\uac8c \uce5c\uc219\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 \uba85\ud655\ud55c \ub77c\ubca8, \uc9c0\uc2dc\uc0ac\ud56d \ubc0f \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4. \uc2e4\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub370\uc774\ud2b8 \ud53c\ucee4\uc640 \ud568\uaed8 \ub2e4\ub978 UI \uc694\uc18c\ub4e4\uc744 \uc870\ud569\ud558\uc5ec \ubcf4\uc5ec\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \uc5ec\ub7ec \uc774\ubca4\ud2b8\uc5d0 \ub300\ud574 \ucd5c\uc801\ud654\ub41c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
7. \uacb0\ub860<\/h2>\n
SwiftUI\uc758 \ub370\uc774\ud2b8 \ud53c\ucee4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub0a0\uc9dc\ub97c \uc120\ud0dd\ud558\ub294 \uac83\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc720\uc6a9\uc131\uc744 \ub192\uc774\ub294 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc9c1\uad00\uc801\uc774\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ub0a0\uc9dc\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc5ec, \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub298 \uc18c\uac1c\ud55c \ub370\uc774\ud2b8 \ud53c\ucee4 \uc0ac\uc6a9\ubc95\uacfc \ud301\uc744 \ucc38\uace0\ud558\uc5ec, \uc5ec\ub7ec\ubd84\uc758 \ub2e4\uc74c iOS \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
\n\ucc38\uace0:<\/strong> SwiftUI\uc758 \ub370\uc774\ud2b8 \ud53c\ucee4\ub294 iOS 14 \uc774\uc0c1\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc804 \ubc84\uc804\uc5d0\uc11c \uc9c0\uc6d0\ub418\uc9c0\ub294 \uc54a\uc73c\ub2c8, \uac1c\ubc1c \ud658\uacbd\uc744 \ud655\uc778\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.\n    <\/div>\n
8. \ucd94\uac00 \uc790\ub8cc<\/h2>\n
\ub354 \ub9ce\uc740 \uc815\ubcf4\ub294 Apple\uc758 \uacf5\uc2dd \ubb38\uc11c\ub97c \ucc38\uc870\ud558\uc138\uc694:<\/p>\n