React Native Vs Expo

expovsreact

React Native vs Expo

ํšŒ์‚ฌ์— ์ž…์‚ฌํ•ด์„œ ๊ฐ€์žฅ ๋จผ์ € ๊ฒฐ์ • ํ•ด์•ผํ–ˆ๋˜๊ฑด ์ˆœ์ˆ˜ React Native๋ฅผ ์“ธ์ง€ Expo ์‚ฌ์šฉํ•ด์„œ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์•ฑ์„ ๋งŒ๋“ค์ง€ ์˜€๋‹ค. ๋ฐ˜๋…„์ด ๋„˜๋Š” ์‹œ๊ฐ„๋™์•ˆ ๊ฐœ๋ฐœ ๋ฐ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํ†ตํ•œ ๊ฒฝํ—˜์„ ํšŒ๊ณ ํ•œ๋‹ค.

๐Ÿ“Œ์ฐจ์ด์ 

Expo์™€ ์ˆœ์ˆ˜ React Native์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ JS๋งŒ ์“ฐ๋ƒ Native์™€ ๊ฐ™์ด ์“ฐ๋‚˜ ์ธ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋Š” ์Šคํƒ€ํŠธ์—…์ด๋‚˜ ์†Œ๊ทœ๋ชจ๋กœ ๋น ๋ฅด๊ฒŒ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๊ธธ ์›ํ•˜๋Š” ๊ณณ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ์—” ๋ญ”๊ฐ€ React Native๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ์—” ๋งž์ง€ ์•Š๋‹ค๊ณ ๋„ ์ƒ๊ฐ์ด ๋“ ๋‹ค. ๊ฒฐ๊ตญ Native๋ฅผ ๊ฑด๋“ ๋‹ค๋Š”๊ฑด ๋‘ ์–ธ์–ด ๋ฐ ์•„ํ‚คํ…์ณ๋ฅผ ๋‹ค๋ฃฐ์ˆ˜ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋ผ๋Š” ๊ฑด๋ฐ ์ด๋Ÿฐ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“ค์ง€ ์•Š๋Š”๋‹ค.

  1. ๊ฐœ๋ฐœํ™˜๊ฒฝ
  • Expo
    • VScode์™€ ๊ฐ™์€ ์—๋””ํ„ฐ๋งŒ ์žˆ์œผ๋ฉด ๋˜๊ณ , Expo Go์•ฑ์„ ํ†ตํ•ด์„œ ๋ฏธ๋ฆฌ ๋นŒ๋“œํ•œ ์•ฑ์„ ์‹คํ–‰ํ•ด ๋ณผ์ˆ˜ ์žˆ๋‹ค.
    • Expo์—์„œ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์„ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด React Native๋ž‘ ์ฐจ์ด๊ฐ€ ์—†๋‹ค. (์˜ˆ์‹œ๋กœ Android์—์„œ๋Š” 2000px์ •๋„ ๋„˜๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋ คํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋‹ค์šด๊ทธ๋ž˜์ด๋“œ ์‹œ์ผœ์„œ ๋ณด์—ฌ์ค€๋‹ค. ์ด๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„  Native์ฝ”๋“œ๋ฅผ ๊ฑด๋“ค์–ด์•ผ ํ–ˆ์—ˆ๋‹ค. ๊ฒฐ๊ตญ ์ด๋ฏธ์ง€๋ฅผ ์ž˜๋ผ์„œ ์˜ฌ๋ฆฌ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์ž๋ฅธ ์ด๋ฏธ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์‹์œผ๋กœ ์ด์Šˆ๋ฅผ ํ•ด๊ฒฐํ–ˆ๋‹ค.)
    • windows์—์„œ๋„ ์•„์ดํฐ๋งŒ ์žˆ์œผ๋ฉด IOS๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅ
  • React Native
    • Android Studio, Xcode์™€ ๊ฐ™์€ ํˆด์ด ํ•„์ˆ˜ ์ด๋ฉฐ, JAVA(or Kotlin), Swit(or Objective-C), JS์ด 3๊ฐ€์ง€ ์–ธ์–ด ๋ฐ ํˆด์„ ๋‹ค๋ฃฐ์ค„ ์•Œ์•„์•ผํ•œ๋‹ค.
    • ์œ„ 3๊ฐ€์ง€๋ฅผ ์ž˜ ๋‹ค๋ฃฐ์ค„ ์•ˆ๋‹ค๋ฉด ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค.
    • macOS๊ฐ€ ์•„๋‹ ๊ฒฝ์šฐ IOS ๊ฐœ๋ฐœ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
  1. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ๋ชจ๋“ˆ
  • Expo
    • Push Notification, Facebook Login, Google Maps ๋“ฑ๊ณผ ๊ฐ™์€ ๊ธฐ๋ณธ ๋ชจ๋“ˆ์„ ์ œ๊ณต
    • ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ๋ชจ๋“ˆ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ๊ฐœ๋ฐœํ•ด์•ผ ํ•˜์ง€๋งŒ ๊ธฐ์ˆ ์˜ ํ•œ๊ณ„๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ X
  • React Native
    • Expo์—์„œ๋Š” ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ๊ธฐ์ˆ  ์ œ๊ณตํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ช‡๋ช‡ ์žˆ์Œ(Kakao Login, FastImage => Expo sdk 48.0.0์ „์—๋Š” ์ง€์›x, masonry list ๋“ฑ)
  1. ์„ฑ๋Šฅ
  • ๋‘˜์˜ ์ฐจ์ด๋Š” ๊ฑฐ์˜ ๋‚˜์ง€ ์•Š๋Š”๋‹ค ๊ฒฐ๊ตญ Expo๋Š” React Native ํ™•์žฅ์ธ๋ฐ ํฐ์ฐจ์ด๊ฐ€ ๋‚ ์ˆ˜๊ฐ€ ์—†๋‹ค. ํ•˜์ง€๋งŒ React Native์—์„œ๋Š” ๊ฒฐ๊ตญ Native๋ฅผ ๊ฑด๋“ค๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๋ฅผ ๋นŒ๋“œํ•˜๊ฑฐ๋‚˜ ๋กœ๋”ฉ์‹œ ์•ฝ๊ฐ„์— ์ฐพ์ด๊ฐ€ ๋‚œ๋‹ค.

๐Ÿ“Œ๊ฒฐ๋ก 

๊ฒฐ๊ตญ์€ ํ•ญ์ƒ ๋ชจ๋“  ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งํ•˜์ง€๋งŒ ์ •๋‹ต์€ ์—†๋‹ค. ํฌ๋ž˜์Šค ํ”Œ๋žซํผ์ด ์•„๋ฌด๋ฆฌ ์ข‹๋‹คํ•ด๋„ ๊ฒฐ๊ตญ ํ•œ๊ณ„์ ์€ ํ•ญ์ƒ ๋งˆ์ฃผํ•œ๋‹ค. ๊ทธ๋ ‡๋‹ค๊ณ  ๋ชจ๋“ ๊ณณ์— ๋‹จ์ ๋งŒ ์žˆ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ์žฅ์ ๋„ ์žˆ๋‹ค. ํ•˜๋ฌผ๋ฉฐ Flutter๋„ ์ข‹์€ ์ฝ”๋“œ ๊ฒฝํ—˜์œผ๋กœ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ข‹์•„ํ•˜์ง€๋งŒ React Native์˜ CodePush๋ผ๋˜์ง€ Dart๋ผ๋Š” ์‹ ์ƒ ์–ธ์–ด๋ผ๋˜์ง€์˜ ํ•œ๊ณ„๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๋ฐ˜๋…„์ด ๋„˜๋Š” ์‹œ๊ฐ„๋™์•ˆ ๋ผ์ด๋ธŒ ์ปค๋จธ์Šค๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์ง€๋งŒ ํฌ๊ฒŒ ๋ถˆํŽธํ•œ ์ ์„ ๋Š๋ผ์ง€๋Š” ๋ชปํ–ˆ๋‹ค. ๊ฒฐ๊ตญ ํ•ด๊ฒฐ์ ์€ ์ฐพ๊ฒŒ ๋˜์–ด์žˆ๊ณ  ๊ทธ ๋ถ€๋ถ„์€ ๊ฐœ๋ฐœ์ž์˜ ์—ญ๋Ÿ‰์— ๋‹ฌ๋ ธ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.