{"id":66,"date":"2020-10-18T21:31:32","date_gmt":"2020-10-18T12:31:32","guid":{"rendered":"http:\/\/practical.kr\/?p=66"},"modified":"2020-10-18T21:31:32","modified_gmt":"2020-10-18T12:31:32","slug":"react-native-%eb%8b%a4%ec%8b%9c-%ea%b3%b5%eb%b6%80%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/practical.kr\/?p=66","title":{"rendered":"React Native \ub2e4\uc2dc \uacf5\ubd80\ud558\uae30"},"content":{"rendered":"\n

React Native\ub294 \uc774\ubbf8 2017\ub144\uc5d0 \ubc84\uc988\uc544\ud2b8\uc5d0\uc11c \ub098\ub984 \ube60\ub974\uac8c \ub3c4\uc785\ud574\uc11c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc131\uacf5\uc801\uc73c\ub85c \uc801\uc6a9\ud588\ub358 \uc801\uc774 \uc788\uc5c8\ub2e4. \ub9c1\ud06c\ucc38\uc870(http:\/\/practical.kr\/?cat=6<\/a>) \uadf8\ub54c \ubc84\uc804\uc774 v0.45 \uc218\uc900\uc774\uc5c8\ub294\ub370 3\ub144\uc774 \uc9c0\ub09c \uc9c0\uae08\ub3c4 React Native\ub294 v0.61\uc5d0 \uba38\ubb3c\ub7ec \uc788\ub2e4. \ub300\uccb4 \uc5b8\uc81c\ucbe4 v1.0\uc744 \ub0b4\ub193\uc73c\ub824\ub098\u2026<\/p>\n\n\n\n

2020\ub144 \ud604\uc7ac \uc5ec\uc804\ud788 \ud06c\ub85c\uc2a4(\uba40\ud2f0)\ud50c\ub7ab\ud3fc(iOS, Android)\uc744 \uc9c0\uc6d0\ud558\ub294\uac83\uc740 \ub9e4\ub825\uc801\uc774\uace0 \uadf8\ub3d9\uc548 \uaf64 \ub9ce\uc740 \uae30\uc220\uc801 \uc9c4\ubcf4\uac00 \uc788\uc5c8\uc744 \uac83\uc774\ub77c\ub294 \uc0dd\uac01\uc744 \uc5fc\ub450\uc5d0 \ub450\uace0 \ub2e4\uc2dc \ud55c\ubc88 \uacf5\ubd80\ub97c \uc2dc\uc791\ud574 \ubcfc\uae4c? \ud558\ub294 \uc0dd\uac01\uc5d0 \uc5f0\uc2b5\uc6a9 \ud504\ub85c\uc81d\ud2b8\ub97c \ud558\ub098 \ub9cc\ub4e4\uae30 \uc2dc\uc791\ud588\ub2e4. \uc774\uae00\uc744 \uc4f0\ub294 \uc774\uc720\ub294 \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uace0 \ubcf4\ub2c8 \uae30\uc5b5 \ub098\ub294\uac8c \ud558\ub098\ub3c4 \uc5c6\uc5b4\uc11c \ubb58 \ud588\ub294\uc9c0 \uc815\ub9ac\ud558\uae30 \uc704\ud568\uc774\ub2e4.<\/p>\n\n\n\n

\ubaa8\ubc14\uc77c \uba40\ud2f0\ud50c\ub7ab\ud3fc<\/p>\n\n\n\n

\uc7a0\uc2dc \uba40\ud2f0 \ud50c\ub7ab\ud3fc \uc774\uc57c\uae30\ub97c \ud558\uace0 \ub118\uc5b4\uac00\ubcf4\uc790. \ucd5c\uadfc 2~3\ub144 \uc0ac\uc774\uc5d0 \ubaa8\ubc14\uc77c \ud50c\ub7ab\ud3fc \uac1c\ubc1c\uacfc \uad00\ub828\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub294 \uc804\ud1b5\uc801\uc778 Swift\uae30\ubc18\uc758 Xcode, Java & Kotlin \uae30\ubc18\uc758 Android Studio\uc640 \ub354\ubd88\uc5b4 Dart \uae30\ubc18\uc758 Flutter, C# \uae30\ubc18\uc758 Xamarin \ub4f1\uc774 \uc3df\uc544\uc9c0\uba70 \uac1c\ubc1c\ud234 \uc804\uc131\uc2dc\ub300\uac00 \uc5f4\ub9b0\uac83 \uac19\ub2e4. \uc131\ub2a5\ub3c4 \ub9ce\uc740 \ud5a5\uc0c1\uc744 \ubcf4\uc5ec\uc11c \uac70\uc758 \ub124\uc774\ud2f0\ube0c \uc131\ub2a5\uc744 \ub530\ub77c\uc624\ub294 \uc218\uc900\uae4c\uc9c0 \ub3c4\ub2ec\ud55c \uac83\uc73c\ub85c \ubcf4\uc778\ub2e4. \uc5b4\ub5a4\uac83\uc744 \uc120\ud0dd\ud574\ub3c4 \ud06c\uac8c \ubb38\uc81c\uac00 \uc5c6\uc744\uac83\uc73c\ub85c \uc0dd\uac01\ub41c\ub2e4. \ud558\uc9c0\ub9cc \uc5ed\uc2dc \uac00\uc7a5 \uc88b\uc740\uac83\uc740 \uc190\uc5d0 \uc775\uc740\uac83\uc774 \uc544\ub2d0\uae4c \uc2f6\ub2e4.<\/p>\n\n\n\n

\ub098 \uac1c\uc778\uc801\uc73c\ub85c\ub294 \uc624\ub798\ub3c4\ub85d \uc0ac\uc6a9\ud574\uc628 Obj-C \uae30\ubc18\uc758 Xcode\uac00 \uac00\uc7a5 \uc88b\uc9c0\ub9cc \uc774\uac74 \uba40\ud2f0 \ud50c\ub7ab\ud3fc\uc774 \uc544\ub2cc\uc9c0\ub77c(iOS\ub9cc\uc9c0\uc6d0) \uc81c\uc678\ud558\uace0 \ucd5c\uadfc 2~3\ub144\uac04 JavaScript \ud2b9\ubcc4\ud788 Vue.js \/ Node.js\ub97c \uc0ac\uc6a9\ud574 \uc624\uace0 \uc788\uc5c8\uae30 \ub54c\ubb38\uc5d0 JS \uae30\uc220\uc744 \uadf8\ub798\ub3c4 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 React Native\uc5d0 \ub04c\ub9ac\ub294\uac74 \ub2f9\uc5f0\ud55c \uc120\ud0dd\uc77c \uc218 \ubc16\uc5d0 \uc5c6\ub2e4. \ud558\uc9c0\ub9cc \ucc98\uc74c \uc811\ud558\ub294 \ubaa8\ubc14\uc77c \uba40\ud2f0 \ud50c\ub7ab\ud3fc \uac1c\ubc1c\uc774\ub77c\uba74 Dart\/Flutter\uc774 \uc880\ub354 \ub0ab\uc9c0 \uc54a\uc744\uae4c \ud558\ub294 \uc0dd\uac01\uc778\ub370 \uc774\uc720\ub294 \uad6c\uae00\uc758 \uac1c\ubc1c\uc790 \ubb38\uc11c \uc9c0\uc6d0\uc774 \ub9e4\uc6b0 \uc88b\uace0 React Native\uc5d0 \ube44\ud558\uc5ec \uc880 \ub354 \uc88b\uc740 \uc2e4\ud589 \uc131\ub2a5\uc744 \ub0b4\uace0 \uc788\ub2e4\uace0 \uc54c\ub824\uc838 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n

Getting-Started<\/p>\n\n\n\n

\ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791\uc740 \uc5ec\uae30\uc11c \ud55c\ub2e4. Expo\ub97c \uc774\uc6a9\ud558\ub294 \ubc29\ubc95\uacfc Cli \ud234\uc744 \uc774\uc6a9\ud558\ub294 \ubc29\ubc95\uc774 \uc788\ub294\ub370 \ub098\ub294 Cli \ud234\uc744 \uc774\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131 \ud588\ub2e4. Expo\ub97c \uc4f0\uba74 \ud3f0\uc5d0 \uc9c1\uc811 \uc571\uc744 \uc62c\ub824\uc11c \ubc14\ub85c \uacb0\uacfc\ub97c \ubcfc \uc218 \uc788\uace0 Cli\ud234\uc744 \uc4f0\uba74 Xcode \ubc0f \uac01\uc885 \ub3c4\uad6c\ub97c \uae54\uc544\uc11c \uc2dc\ubbac\ub808\uc774\ud130\uc5d0\uc11c \ud14c\uc2a4\ud2b8\ub97c \ud560 \uc218 \uc788\ub2e4. \ub098\uc911\uc5d0 \uc2a4\ud1a0\uc5b4\uc6a9\uc73c\ub85c \ube4c\ub4dc\ub97c \ud558\uae30 \uc704\ud574\uc11c \ud6c4\uc790\uc758 \ubc29\ubc95\uc73c\ub85c \uc124\uce58\ud558\ub294 \uac83\uc774 \uc88b\ub2e4. \ud558\uc9c0\ub9cc \uac04\ub2e8\ud55c \ud14c\uc2a4\ud2b8\ub294 Expo\uac00 \ud6e8\uc52c \ud3b8\ud558\ub2e4.<\/p>\n\n\n\n

https:\/\/reactnative.dev\/docs\/getting-started<\/a><\/p>\n\n\n\n

Navigation<\/p>\n\n\n\n

\uc571\uc744 \ub9cc\ub4e4\ub824\uba74 \uae30\ubcf8\uc801\uc73c\ub85c \uba54\ub274 \uc2dc\uc2a4\ud15c\uc774 \uc788\uc5b4\uc57c \ud55c\ub2e4. \ubaa8\ubc14\uc77c \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uba54\ub274 \uc2dc\uc2a4\ud15c\uc740 \ubcf4\ud1b5 Tabbar \u2013 Navigation, Drawer \u2013 Navigation \ub450\uac00\uc9c0 \uc911\uc5d0\uc11c \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc77c\ubc18\uc801\uc778 \uc120\ud0dd\uc774\ub2e4. \ud55c\ub3d9\uc548 Drawer \uba54\ub274\uac00 \uc720\ud589\uc744 \ud558\ub2e4\uac00 \ucd5c\uadfc \ub2e4\uc2dc Tabbar \uc2dc\uc2a4\ud15c\uc774 \uc720\ud589\uc778\uac83 \uac19\uc544\uc11c \ub098\ub294 Tabbar \uc2dc\uc2a4\ud15c \uae30\ubc18\uc73c\ub85c \ud588\ub2e4.<\/p>\n\n\n\n

\ub124\ube44\uac8c\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 ReactNavigation\uc744 \uc0ac\uc6a9\ud588\ub2e4. \uc544\ub9c8 \uac1c\ubc1c\uc790\ub4e4\uc774 \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uba54\ub274 \uc2dc\uc2a4\ud15c\uc774\uace0 Tabbar\uc640 Drawer\ub97c \ubaa8\ub450 \uc9c0\uc6d0\ud55c\ub2e4.<\/p>\n\n\n\n

https:\/\/reactnavigation.org\/docs\/getting-started<\/a><\/p>\n\n\n\n

import React <\/em>from 'react'<\/strong>;\nimport <\/strong>{NavigationContainer<\/em><\/strong>} from '@react-navigation\/native'<\/strong>;\nimport <\/strong>{ createBottomTabNavigator <\/em><\/strong>} from '@react-navigation\/bottom-tabs'<\/strong>;\n\nimport <\/strong>Home from '.\/src\/Home'<\/strong>;\nimport <\/strong>Profile from '.\/src\/Profile'<\/strong>;\nimport <\/strong>Settings from '.\/src\/Settings'<\/strong>;\n\nconst <\/strong>Tab = createBottomTabNavigator<\/em><\/strong>();\n\nexport default function <\/strong>App<\/em>() {\n\n  return <\/strong>(\n    <NavigationContainer<\/strong>>\n      <Tab.Navigator<\/strong>>\n        <Tab.Screen name=\"Home\" component=<\/strong>{Home}\/>\n        <Tab.Screen name=\"Profile\" component=<\/strong>{Profile}\/>\n        <Tab.Screen name=\"Settings\" component=<\/strong>{Settings}\/>\n      <\/Tab.Navigator<\/strong>>\n    <\/NavigationContainer<\/strong>>\n  );\n}<\/pre>\n\n\n\n
\ucf54\ub4dc\uc758 \uacb0\uacfc\ub85c \uc544\ub798\uc640 \uac19\uc740 \uba54\ub274 \uc2dc\uc2a4\ud15c\uc774 \ub098\uc654\ub2e4. \uba54\ub274\uc5d0 \uc544\uc774\ucf58\uc744 \ub123\uac70\ub098 \uc880\ub354 \uc608\uc058\uac8c \uafb8\ubbf8\ub824\uba74 https:\/\/reactnavigation.org\/docs\/tab-based-navigation<\/a> \ub97c \ucc38\uc870\ud558\uc790.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Rest API Communication<\/p>\n\n\n\n
Rest API \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc9c0\uace0 \uc640\uc11c \ubaa9\ub85d \ud615\ud0dc\ub85c \ubcf4\uc5ec\uc8fc\ub294 \uac83\uc740 axios\ub97c \uc774\uc6a9\ud55c\ub2e4. https:\/\/github.com\/axios\/axios<\/a> \ub97c \ucc38\uc870\ud55c\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8 \ub420\ub54c API \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc640\uc11c state\uc5d0 \uc800\uc7a5\ud588\ub2e4.<\/p>\n\n\n\n
import axios <\/em>from \"axios\"<\/strong>;\n\n...\n\ncomponentDidMount() {\n axios<\/em><\/strong>.get(\"https:\/\/jsonplaceholder.typicode.com\/users\"<\/strong>)\n  .then(res =>{\n   this<\/strong>.setState({ persons<\/strong>:res.data <\/strong>});\n  });\n}\n<\/pre>\n\n\n\n
FlatList \u2013 \ubaa9\ub85d\ubcf4\uc5ec\uc8fc\uae30<\/p>\n\n\n\n
\ubaa8\ubc14\uc77c \ud654\uba74\uc758 \ub300\ubd80\ubd84\uc740 \ubaa9\ub85d(List)\uc774\ub2e4. \uc0c1\ud558\uc2a4\ud06c\ub864\uc744 \ud1b5\ud558\uc5ec \ub370\uc774\ud130 \ub9ac\uc2a4\ud2b8\ub97c \uc870\ud68c \ud558\uace0 \ud654\uba74\uc744 \uc120\ud0dd\ud558\uba74 \uc0c1\uc138\ud654\uba74\uc73c\ub85c \uc9c4\uc785\ud558\ub294 \uad6c\uc131\uc774 \ub300\ubd80\ubd84\uc774\ub2e4. \uc774 \ub9ac\uc2a4\ud2b8\ub294 \uc2a4\ud06c\ub864\uc774 \uacc4\uc18d\ub418\ub294 \ud2b9\uc131\uc0c1 \ud654\uba74\uc5d0 \ubcf4\uc774\ub294 \ub9cc\ud07c\ub9cc \uba54\ubaa8\ub9ac \uad00\ub9ac\ub97c \ud558\uc9c0 \uc54a\uc73c\uba74 \ub108\ubb34 \ub9ce\uc740 \uba54\ubaa8\ub9ac\ub97c \uc0ac\uc6a9\ud574\uc11c \uc571\uc744 \ub2e4\uc740 \uc2dc\ud0a4\ub294 \uc6d0\uc778\uc774 \ub41c\ub2e4. React Native\uc758 FlatList\ub294 \uc790\ub3d9\uc73c\ub85c \uba54\ubaa8\ub9ac \uad00\ub9ac\ub97c \ud574\uc8fc\uae30 \ub54c\ubb38\uc5d0 \ud544\uc218\uc801\uc73c\ub85c \uc4f0\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc774\ub2e4.<\/p>\n\n\n\n
\ub300\ub7b5 \uc544\ub798\uc640 \uac19\uc774 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n
function <\/strong>Item({item, navigation}) {\n return <\/strong>(\n   <View<\/strong>>\n    <Text<\/strong>>{item.name<\/strong>}<\/Text<\/strong>>\n   <\/View<\/strong>>\n )\n}\n....\n\nrender() {\n return <\/strong>(\n  <View<\/strong>>\n   <FlatList\n    data=<\/strong>{this<\/strong>.state<\/strong>.persons<\/strong>}\n    renderItem=<\/strong>{({item})=><Item item=<\/strong>{item}\/>}\n    keyExtractor=<\/strong>{item=>item.id<\/strong>}\n   \/>\n  <\/View<\/strong>>\n )\n}<\/pre>\n\n\n\n
\"\"
FlatList \uacb0\uacfc\ud654\uba74<\/figcaption><\/figure>\n\n\n\n
\uc0c1\ud0dc\uad00\ub9ac(Store)<\/p>\n\n\n\n
React Native\uc758 \uc0c1\ud0dc \uad00\ub9ac\ub294 Redux\ub85c \ud558\ub294\uac83\uc774 \uae30\ubcf8\uc774\ub2e4. \ud558\uc9c0\ub9cc Redux\uc758 \uad6c\uc870\uc640 \uc0ac\uc6a9\ubc95\uc774 \uc9c1\uad00\uc801\uc774\uc9c0 \uc54a\uc544\uc11c \uc880\ub354 \uc9c1\uad00\uc801\uc73c\ub85c \uc4f8 \uc218 \uc788\ub294 MobX\ub97c \uc0ac\uc6a9\ud588\ub2e4. Redux\uc640 MobX\uc758 \ube44\uad50\uc640 \uad00\ub828\ud574\uc11c \uc6b0\uc544\ud55c \ud615\uc81c\uc758 \uae30\uc220\ube14\ub85c\uadf8\uc5d0 \uc88b\uc740 \uc790\ub8cc\uac00 \uc788\uc5b4\uc11c \ub9c1\ud06c\uc5d0\uc11c \uc790\uc138\ud55c \uc815\ubcf4\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
https:\/\/woowabros.github.io\/experience\/2019\/01\/02\/kimcj-react-mobx.html<\/a><\/p>\n\n\n\n
MobX\ub294 \ub9e4\uc6b0 \uc9c1\uad00\uc801\uc73c\ub85c Store\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294\ub370 \uc774\uac83\uc740 \ub9c8\uce58 Vue.js\uc758 Store \ucc98\ub7fc \ub2e8\uc21c\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc0ac\uc2e4 \uadf8\uc5d0 \ube44\ud558\uba74 Redux\ub294 \ub108\ubb34 \ubcf5\uc7a1\ud55c \uad6c\uc870\ub97c \uac00\uc9c4\uac83\uc774 \uc0ac\uc2e4\uc774\ub2e4. \ub300\ub7b5 \uc544\ub798\uc640 \uac19\uc740 \ucf54\ub4dc\ub97c \uc774\uc6a9\ud558\uc5ec \ub450\uac1c\uc758 \ud398\uc774\uc9c0\uc5d0\uc11c \ub3d9\uc77c\ud55c \uac12\uc758 \uc99d\uac00\ub97c \ud655\uc778 \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
import <\/strong>{observable<\/em><\/strong>} from 'mobx'<\/strong>;\n\nclass <\/strong>CounterStore {\n @observable counter <\/strong>= 0;\n \n increment() {\n  this<\/strong>.counter<\/strong>++;\n }\n\n decrement() {\n  this<\/strong>.counter<\/strong>--;\n }\n}\nexport default new <\/strong>CounterStore();<\/pre>\n\n\n\n
import React<\/em><\/strong>, {Component} from 'react'<\/strong>;\nimport <\/strong>{ observer } from 'mobx-react'<\/strong>;\nimport <\/strong>{ StyleSheet<\/strong>, Text<\/strong>, View<\/strong>, Button <\/strong>} from 'react-native'<\/strong>;\n\nimport <\/strong>CounterStore from '..\/..\/mobx\/store'\n\n<\/strong>@observer\nexport default class <\/strong>HomeScreen extends <\/strong>Component {\n render() {\n  return <\/strong>(\n   <View <\/strong>>\n    <Text style=<\/strong>{{fontSize<\/strong>: 60}}>\n     {CounterStore.counter<\/strong>}\n    <\/Text<\/strong>>\n    <Button\n     title=\"Increase\"\n     onPress=<\/strong>{() => CounterStore.increment()}\n    \/>\n   <\/View<\/strong>>\n  )\n }\n}<\/pre>\n\n\n\n
Source Code \u2013 GitHub<\/p>\n\n\n\n
\uc544\ub798 \ub9c1\ud06c\uc5d0\uc11c \uc704\uc758 \uc148\ud50c \ud504\ub85c\uc81d\ud2b8\uc758 \uc18c\uc2a4\ucf54\ub4dc\ub294 \uc544\ub798 \ub9c1\ud06c\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
https:\/\/github.com\/bipark\/react_native_study<\/a><\/p>\n\n\n\n
\uad00\ub828 \ub9c1\ud06c<\/p>\n\n\n\n
React \uc2a4\ud130\ub514 \u2013 https:\/\/ko.reactjs.org\/docs\/hello-world.html<\/a><\/p>\n\n\n\n
Components \u2013 https:\/\/reactnative.dev\/docs\/activityindicator<\/a><\/p>\n\n\n\n
Navigation \u2013 https:\/\/reactnavigation.org\/docs\/getting-started<\/a><\/p>\n\n\n\n
Axios \u2013 https:\/\/github.com\/axios\/axios<\/a><\/p>\n\n\n\n
Awesome React Native \u2013 https:\/\/github.com\/jondot\/awesome-react-native<\/a><\/p>\n\n\n\n
\ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c MobX \uc0ac\uc6a9\ud558\uae30 \u2013 https:\/\/velog.io\/@velopert\/MobX-2-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-MobX-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-oejltas52z<\/a><\/p>\n\n\n\n
React\uc5d0\uc11c Mobx \uacbd\ud5d8\uae30 (Redux\uc640 \ube44\uad50\uae30) \u2013 https:\/\/woowabros.github.io\/experience\/2019\/01\/02\/kimcj-react-mobx.html<\/a><\/p>\n\n\n\n
\uce74\uce74\uc624 \ub85c\uadf8\uc778 \ubaa8\ub4c8 \u2013 https:\/\/github.com\/react-native-seoul\/react-native-kakao-login<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
React Native\ub294 \uc774\ubbf8 2017\ub144\uc5d0 \ubc84\uc988\uc544\ud2b8\uc5d0\uc11c \ub098\ub984 \ube60\ub974\uac8c \ub3c4\uc785\ud574\uc11c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc131\uacf5\uc801\uc73c\ub85c \uc801\uc6a9\ud588\ub358 \uc801\uc774 \uc788\uc5c8\ub2e4. \ub9c1\ud06c\ucc38\uc870(http:\/\/practical.kr\/?cat=6) \uadf8\ub54c \ubc84\uc804\uc774 v0.45 \uc218\uc900\uc774\uc5c8\ub294\ub370 3\ub144\uc774 \uc9c0\ub09c \uc9c0\uae08\ub3c4 React Native\ub294 v0.61\uc5d0 \uba38\ubb3c\ub7ec \uc788\ub2e4. \ub300\uccb4 \uc5b8\uc81c\ucbe4 v1.0\uc744 \ub0b4\ub193\uc73c\ub824\ub098\u2026 2020\ub144 \ud604\uc7ac \uc5ec\uc804\ud788 \ud06c\ub85c\uc2a4(\uba40\ud2f0)\ud50c\ub7ab\ud3fc(iOS, Android)\uc744 \uc9c0\uc6d0\ud558\ub294\uac83\uc740 \ub9e4\ub825\uc801\uc774\uace0 \uadf8\ub3d9\uc548 \uaf64 \ub9ce\uc740 \uae30\uc220\uc801 \uc9c4\ubcf4\uac00 \uc788\uc5c8\uc744 \uac83\uc774\ub77c\ub294 \uc0dd\uac01\uc744 \uc5fc\ub450\uc5d0 \ub450\uace0 \ub2e4\uc2dc \ud55c\ubc88 \uacf5\ubd80\ub97c \uc2dc\uc791\ud574 \ubcfc\uae4c? \ud558\ub294 \uc0dd\uac01\uc5d0 \uc5f0\uc2b5\uc6a9<\/p>\n
\n\t\t\t\t Read More <\/span> <\/i><\/a>\n\t\t\t<\/div>\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":[23,24,25],"tags":[],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-javascript","category-react","category-reactnative"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=66"}],"version-history":[{"count":1,"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":67,"href":"http:\/\/practical.kr\/index.php?rest_route=\/wp\/v2\/posts\/66\/revisions\/67"}],"wp:attachment":[{"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/practical.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}