React Native๋Š” ๋งํ–ˆ๋‹ค? ์ง€์› ์ค‘๋‹จ์ด๋‹ค? ์ „ํ˜€ ์•„๋‹™๋‹ˆ๋‹ค.

React Native๋Š” ๋งํ–ˆ๋‹ค? ์ง€์› ์ค‘๋‹จ์ด๋‹ค? ์ „ํ˜€ ์•„๋‹™๋‹ˆ๋‹ค.

D
dongAuthor
15 min read

์•„์ง๋„ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด React Native๊ฐ€ ์ง€์› ์ค‘๋‹จ ๋˜์—ˆ๋‹ค๊ณ  ์•Œ๊ณ  ์žˆ๋Š” ์‚ฌ๋žŒ๋“ค์ด ์ข…์ข… ๋ณด์ž…๋‹ˆ๋‹ค. ํ˜น์€ ์ง€์› ์ค‘๋‹จ ๋ฐ ๋งํ•œ ๊ธฐ์ˆ  ์•„๋‹ˆ๋ƒ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๋„ ๊ฐ„ํ˜น ๋ณด์—ฌ์š”. ์ด๋Š” ์‚ฌ์‹ค์ด ์•„๋‹™๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๊พธ์ค€ํžˆ ์—…๋ฐ์ดํŠธ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

React Native ๊ฒ€์ƒ‰๋Ÿ‰

์•„๋‹ˆโ€ฆ ์•„์ง๋„ React Native ์ง€์› ์ค‘๋‹จ๋œ๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋Š” ์‚ฌ๋žŒ์ด ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ๋‹ค๋‹ˆโ€ฆ

์™œ React Native๊ฐ€ ๋งํ–ˆ๋‹ค๊ณ  ๋ณด๋Š”๊ฑธ๊นŒ?

ReactNative๋ฅผ ์ถœ์‹œํ•œ Meta๋Š” ์ตœ๊ทผ ์ œํ’ˆ ์ค‘ ํ•˜๋‚˜์ธ Threads ์•ฑ์„ ์ฃผ๋กœ ๋„ค์ดํ‹ฐ๋ธŒ(Swift, Kotlin, Jetpack Compose) ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. "Meta์กฐ์ฐจ React Native๋ฅผ ๋ฒ„๋ ธ๋‹ค"๋Š” ์ด์•ผ๊ธฐ๊ฐ€ ๋Œ์•„์„œ ์ด๋Ÿฌํ•œ ์—ฌ๋ก ์ด ๋งŽ์•˜๋˜ ๊ฒƒ์œผ๋กœ ์‚ฌ๋ฃŒ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Š” ์ ˆ๋ฐ˜๋งŒ ๋งž๋Š” ์ด์•ผ๊ธฐ์ž…๋‹ˆ๋‹ค. ๋จผ์ € Threads ์•ฑ์˜ ํ•ต์‹ฌ ํ™”๋ฉด์€ ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๊ตฌํ˜„๋œ ๊ฒƒ์ด ๋งž์Šต๋‹ˆ๋‹ค. Emerge Tools์˜ ๋ถ„์„์— ๋”ฐ๋ฅด๋ฉด Threads๋Š” iOS์—์„œ Swift, Android์—์„œ Kotlin/Jetpack Compose๋กœ ๊ตฌ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

The apps are largely native, using a mix of Swift on iOS (and a little Objective C), and Jetpack Compose on Android (with Kotlin and Java as languages). There are some shared server-rendered screens for some simple experiences, but native is the norm.

Technology choices and engineering approaches

์ผ๋ถ€ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ๋Š” ํŽ˜์ด์Šค๋ถ์„ ์ง์ ‘ ๋””์ปดํŒŒ์ผ๋ง ํ–ˆ์„ ๋•Œ ReactNative์ด ๊ฑฐ์˜ ์—†๊ณ  ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค๊ณ ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” Facebook ์ž…์žฅ๊ณผ๋Š” ์ƒ๋ฐ˜๋œ ์ด์•ผ๊ธฐ๊ธฐ๋Š” ํ•ฉ๋‹ˆ๋‹ค. Meta ๊ฐœ๋ฐœํŒ€์€ ReactNative๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๊ณ ๋“ค ํ•˜๋‹ˆ๊นŒ์š”.

์‹ค์€ Meta์—์„œ React Native๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค?

์ธ์Šคํƒ€๊ทธ๋žจ๋„ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์š” !

์ธ์Šคํƒ€๊ทธ๋žจ์—์„œ ReactNative๋กœ ์–ผ๋งˆ๋‚˜ ๊ฐœ๋ฐœ ์†๋„๊ฐ€ ์ƒ์Šน๋˜์—ˆ๋Š”์ง€ ๋ณด์—ฌ์ฃผ๋Š” ๊ธฐ์‚ฌ ์ผ๋ถ€

์ธ์Šคํƒ€๊ทธ๋žจ ์—”์ง€๋‹ˆ์–ด๋ง ๋ธ”๋กœ๊ทธ์—์„œ๋Š” ReactNative๋กœ ๊ฐœ๋ฐœ ์†๋„๋ฅผ ์ƒ๋‹น๋ถ€๋ถ„ ํ–ฅ์ƒ์‹œ์ผฐ๋‹ค๊ณ  ์ „ํ–ˆ์Šต๋‹ˆ๋‹ค.

Instagram์€ 2016๋…„ ์ดˆ๋ถ€ํ„ฐ React Native๋ฅผ ๋„์ž…ํ•ด, iOS์™€ Android ์–‘์ชฝ์— ๋™์ผํ•œ ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๋ฉฐ ๊ธฐ๋Šฅ์„ ๋น ๋ฅด๊ฒŒ ์ถœ์‹œํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์‹คํ—˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹น์‹œ Instagram ์—”์ง€๋‹ˆ์–ด๋ง ํŒ€์€ "๊ธฐ์กด ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์— React Native๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๊ฒƒ์€ ์ƒˆ๋กœ์šด ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ๊นŒ๋‹ค๋กญ๋‹ค"๊ณ  ์ธ์ •ํ•˜๋ฉด์„œ๋„, ๊ฐ€์žฅ ๋‹จ์ˆœํ•œ ํ™”๋ฉด์ธ **ํ‘ธ์‹œ ์•Œ๋ฆผ ์„ค์ •(Push Notification Settings)**๋ถ€ํ„ฐ ํฌํŒ…์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ด ํ™”๋ฉด์€ ์›๋ž˜ WebView๋กœ ๊ตฌํ˜„๋˜์–ด ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์—, React Native๋ฅผ ์ ์šฉํ–ˆ์„ ๋•Œ ์„ฑ๋Šฅ ํ–ฅ์ƒ์„ ์ธก์ •ํ•˜๊ธฐ ์ข‹์€ ์‹คํ—˜ ๋Œ€์ƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ๊ฒฐ๊ณผ, Instagram ํŒ€์€ React Native์˜ ์—ฌ๋Ÿฌ ์žฅ์ ์„ ์ง์ ‘ ๊ฒ€์ฆํ–ˆ์Šต๋‹ˆ๋‹ค:

  • **ํ•ซ ๋ฆฌ๋กœ๋”ฉ(Hot Reloading)**๊ณผ **๋ผ์ด๋ธŒ ๋ฆฌ๋กœ๋”ฉ(Live Reload)**์„ ํ†ตํ•ด ์ปดํŒŒ์ผ-์„ค์น˜ ๊ณผ์ •์„ ์ƒ๋žตํ•˜๊ณ ,
    ๊ธฐ๋Šฅ์„ ์ˆ˜์ •ํ•˜์ž๋งˆ์ž ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์–ด์š”.

  • ๊ณตํ†ต ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ๋ฅ ์ด ๋งค์šฐ ๋†’์•„ iOS/Android ๊ธฐ๋Šฅ์„ ๋™์‹œ์— ๋น ๋ฅด๊ฒŒ ์ถœ์‹œํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
    ์˜ˆ๋ฅผ ๋“ค์–ด,

    • Post Promote: 99%
    • SMS Captcha Checkpoint: 97%
    • Comment Moderation: 85%
    • Lead Gen Ads: 87%
    • Push Notification Settings: 92% ๋“ฑ์œผ๋กœ, ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์—์„œ 80% ์ด์ƒ์˜ ์ฝ”๋“œ๊ฐ€ ๊ณต์œ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
  • React Native๋กœ ์ „ํ™˜ํ•œ ๊ธฐ๋Šฅ๋“ค์€ ๊ธฐ์กด WebView ๋Œ€๋น„ **์‹œ์ž‘ ์†๋„(start-up time)**๊ฐ€ ๋” ๋น ๋ฅด๊ณ , UX ํ’ˆ์งˆ๋„ ํ–ฅ์ƒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Instagram์€ ์ดํ›„์—๋„ Edit Profile, Photos Of, Post Promote, Save, Comment Moderation, Lead Gen Ads ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ React Native๋กœ ํฌํŒ…ํ•˜๋ฉฐ, ๊ฐ ๊ธฐ๋Šฅ๋งˆ๋‹ค ๋„ค์ดํ‹ฐ๋ธŒ์™€ ๊ฑฐ์˜ ๊ตฌ๋ถ„๋˜์ง€ ์•Š๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ๊ฐœ๋ฐœ ์†๋„๋ฅผ ๋น„์•ฝ์ ์œผ๋กœ ํ–ฅ์ƒ์‹œ์ผฐ๋‹ค๊ณ  ์ „ํ•ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์Šค๋ถ์—์„œ๋„ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์š” !

React Native๋Š” ๋‹จ์ง€ ์˜ˆ์ „ ์‹คํ—˜์ ์ธ ๊ธฐ์ˆ ์ด ์•„๋‹ˆ๋ผ, Meta ๋‚ด๋ถ€์—์„œ๋„ ๊พธ์ค€ํžˆ ์ฃผ์š” ์„œ๋น„์Šค์— ํ™œ์šฉ๋˜๊ณ  ์žˆ๋Š” ํ•ต์‹ฌ ๊ธฐ์ˆ  ์Šคํƒ์ž…๋‹ˆ๋‹ค.
Meta์˜ ๊ณต์‹ ๋ธ”๋กœ๊ทธ Meet the Developers โ€“ React @ Meta Edition ์— ๋”ฐ๋ฅด๋ฉด,
Facebook Marketplace ํŒ€์˜ ํ”„๋ŸฐํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด Blair Vanderhoof๋Š” ์ง€๋‚œ 7๋…„๊ฐ„ Marketplace์˜ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ React Native๋กœ ๊ตฌ์ถ•ํ•˜๊ณ  ๊ฐœ์„ ํ•ด์™”๋‹ค๊ณ  ๋งํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Š” ์ด๋ ‡๊ฒŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

โ€œ์ €๋Š” Facebook Marketplace์—์„œ ํŒ๋งค์ž ํ—ˆ๋ธŒ ํ™”๋ฉด, ์ œํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€ ์ „ํ™˜ ์• ๋‹ˆ๋ฉ”์ด์…˜, ํ”ผ๋“œ ํ•ญ๋ชฉ UI, ๊ทธ๋ฆฌ๊ณ  ์ƒ๋Œ€๋ฐฉ ํ”„๋กœํ•„ ํ™”๋ฉด๊ณผ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ React Native๋กœ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.โ€

โ€œ์ €๋Š” JavaScript๋ฅผ ์‚ฌ์šฉํ•ด UI๋ฅผ ์™„์ „ํžˆ ์ œ์–ดํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ๋ฅผ ๊ฑฐ์˜ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  ๋Œ€๋ถ€๋ถ„์„ React๋กœ ๋นŒ๋“œํ•ฉ๋‹ˆ๋‹ค.โ€
โ€” Blair Vanderhoof, Frontend Engineer at Meta

์ฆ‰, Facebook Marketplace ์•ฑ์€ React Native ๊ธฐ๋ฐ˜์˜ ํ™”๋ฉด๊ณผ ๊ธฐ๋Šฅ๋“ค์ด ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ์ ์šฉ๋œ ๋Œ€ํ‘œ์ ์ธ Meta ์ œํ’ˆ์ด์—์š”.
Marketplace ํŒ€์€ Meta ๋‚ด๋ถ€์˜ React Native ์ธํ”„๋ผ ํŒ€๊ณผ ๊ธด๋ฐ€ํžˆ ํ˜‘๋ ฅํ•˜๋ฉฐ ์ƒˆ๋กœ์šด ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์‹คํ—˜ํ•˜๊ณ , UI ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ์ œ์Šค์ฒ˜, ์ „ํ™˜ ํšจ๊ณผ ๋“ฑ ๋ณต์žกํ•œ ์ธํ„ฐ๋ž™์…˜์„ React Native + PanResponder API๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํŠนํžˆ Blair๋Š” โ€œReact Native๋Š” Facebook Marketplace๊ฐ€ ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•˜๊ณ ,
๊ตฌ๋งค์ž์™€ ํŒ๋งค์ž ๋ชจ๋‘์˜ ์š”๊ตฌ๋ฅผ ์ถฉ์กฑ์‹œํ‚ค๋Š” ํ’๋ถ€ํ•œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ UI๋ฅผ ๋น ๋ฅด๊ฒŒ ๋นŒ๋“œํ•˜๊ณ  ๋””์ž์ธํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์คฌ๋‹คโ€๊ณ  ๊ฐ•์กฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ, Meta ๋‚ด๋ถ€์—์„œ๋Š” ์ด๋ฏธ ์ˆ˜๋…„ ์ „๋ถ€ํ„ฐ React Native๋ฅผ Marketplace๋ฅผ ๋น„๋กฏํ•œ ๋‹ค์–‘ํ•œ ๋ชจ๋ฐ”์ผ ๊ธฐ๋Šฅ์˜ ํ‘œ์ค€ ๊ธฐ์ˆ  ์Šคํƒ ์ค‘ ํ•˜๋‚˜๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ,
์ด ๊ณผ์ •์—์„œ React Hooks, Context API, Relay ๋“ฑ ์ตœ์‹  React ์ƒํƒœ๊ณ„์˜ ๊ธฐ๋Šฅ๋“ค์„ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—๋„ ๊ทธ๋Œ€๋กœ ์ ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๊ตญ Meta๊ฐ€ React Native๋ฅผ โ€œ๋ฒ„๋ ธ๋‹คโ€๋Š” ๋ฃจ๋จธ์™€ ๋‹ฌ๋ฆฌ, Facebook Marketplace๋ฅผ ๋น„๋กฏํ•œ ์‹ค์ œ ํ”„๋กœ๋•์…˜ ๋ ˆ๋ฒจ ์„œ๋น„์Šค์—์„œ React Native๋Š” ์—ฌ์ „ํžˆ ํ™œ๋ฐœํžˆ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ, Meta์˜ ์—”์ง€๋‹ˆ์–ด๋“ค์€ ์ง€๊ธˆ๋„ ์ด ๊ธฐ์ˆ ์„ ๊ฐœ์„ ํ•˜๊ณ  ๋ฐœ์ „์‹œํ‚ค๋Š” ๋ฐ ์ง์ ‘ ๊ธฐ์—ฌํ•œ๋‹ค๊ณ  ์ „ํ•ด์ง‘๋‹ˆ๋‹ค.


๋ฌผ๋ก , ์—ฌ๋ก ๊ณผ ๊ณต์‹ ์ž…์žฅ ๊ฐ„์˜ ์ฐจ์ด๋Š” ์ถฉ๋ถ„ํžˆ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค. React Native๋Š” Meta ๊ธฐ์ˆ ์ด๋‹ค ๋ณด๋‹ˆ๊นŒ ๊ณต์‹ ์ž…์žฅ์—์„œ ๋‹น์—ฐํžˆ ์ž์‚ฌ ๊ธฐ์ˆ ์ด ์ข‹๋‹ค๊ณ  ์–ดํ•„ํ•  ์ˆ˜ ์žˆ์ฃ . ๐Ÿ˜‰

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๊ฒฐ๊ตญ Meta๋Š” React Native๋ฅผ ๋ฒ„๋ฆฐ๊ฒŒ ์•„๋‹™๋‹ˆ๋‹ค.

React Native Logo

์ฆ‰, Meta๊ฐ€ React Native๋ฅผ ์™„์ „ํžˆ ๋ฒ„๋ฆฐ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์ œํ’ˆ์˜ ์„ฑ๊ฒฉ์— ๋”ฐ๋ผ ์ ์ ˆํ•œ ๊ธฐ์ˆ ์„ ์„ ํƒํ•œ ๊ฒƒ์ด์—์š”. ๋ชจ๋“  ์—”์ง€๋‹ˆ์–ด๊ฐ€ โ€œ๋„ค์ดํ‹ฐ๋ธŒ ์–ธ์–ด๋กœ ๊ตฌ์„ฑ๋œ ์•ฑ์ด ์ œ์ผ ๋‚ซ๋‹คโ€๋Š” ๋ฐ์—๋Š” ๊ณต๊ฐํ•  ๊ฑฐ์˜ˆ์š”. ๋‹ค๋งŒ React Native๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ์„ค๊ณ„๋œ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, ํ•œ ๋ฒˆ์˜ ์ฝ”๋“œ ์ž‘์„ฑ์œผ๋กœ iOS์™€ Android ์•ฑ์„ ๋™์‹œ์— ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์—์„œ ์—ฌ์ „ํžˆ ํฐ ์žฅ์ ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

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

React Native ๊นƒํ—ˆ๋ธŒ ์ปค๋ฐ‹ ํŽ˜์ด์ง€

์‹ค์ œ๋กœ React Native๋Š” ๊พธ์ค€ํžˆ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๋งค๋…„ ์—ด๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ ์ปจํผ๋Ÿฐ์Šค์—์„œ๋„ ๊พธ์ค€ํžˆ ๋“ฑ์žฅํ•˜๊ณ  ์†Œ๊ฐœํ•˜๊ณ  ์žˆ์–ด์š”.

April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.

Website - X - Bluesky

November 14 & 15, 2024. In-person in London, UK

Website - Twitter

September 7 & 8, 2023. Wrocล‚aw, Poland

Website - Twitter - Facebook

September 1-2, 2022 - Remote event

Website - Twitter - Linkedin - Facebook - Instagram


์ž ๊ทธ๋Ÿฐ๋ฐ, React Native๋งŒ์ด ํฌ๋กœ์Šค ํ”Œ๋žซํผ์„ ์ง€์›ํ•˜์ง€ ์•Š์ฃ . ๋Œ€ํ‘œ์ ์œผ๋กœ Flutter์™€ ๋น„๊ต๋ฅผ ๋งŽ์ด ํ•ฉ๋‹ˆ๋‹ค.

React Native vs Flutter

Stackoverflow survey์—์„œ ๋ฐœํ‘œํ•œ React Native์™€ Flutter์˜ ๊ด€์‹ฌ ๋„ํ‘œ

React Native์™€ Flutter๋Š” React Native์˜ ์•ˆ์ข‹์€ ์ธ์‹ ์ „ ๊นŒ์ง€๋Š” ๊พธ์ค€ํžˆ ๋Œ€๋ฆฝ๋˜์–ด ์™”์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์š”์ฆ˜ ๋Œ€์„ธ๋Š” Flutter๊ฐ€ ๋”์šฑ ๋ถ€ํฅํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ด๋Š” ๊ฒƒ์€ ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค.

๊ตฌ๋ถ„ React Native Flutter
์ถœ์‹œ ์ฃผ์ฒด / ์—ฐ๋„ Meta(ํŽ˜์ด์Šค๋ถ) / 2013๋…„ Google / 2017๋…„
์–ธ์–ด(Language) JavaScript + JSX Dart
๋ Œ๋”๋ง ๋ฐฉ์‹ (Architecture) JavaScript Bridge๋ฅผ ํ†ตํ•ด ๋„ค์ดํ‹ฐ๋ธŒ ์ปดํฌ๋„ŒํŠธ ํ˜ธ์ถœ (Flux ์•„ํ‚คํ…์ฒ˜ ๊ธฐ๋ฐ˜) Skia 2D ๋ Œ๋”๋ง ์—”์ง„์œผ๋กœ ์ž์ฒด UI ๋ Œ๋”๋ง
UI ๊ตฌ์„ฑ ๋ฐฉ์‹ ๋„ค์ดํ‹ฐ๋ธŒ ํ”Œ๋žซํผ์˜ UI ์š”์†Œ๋ฅผ ํ˜ธ์ถœ (Native View์™€ ์—ฐ๊ฒฐ) Flutter ์œ„์ ฏ ์‹œ์Šคํ…œ์œผ๋กœ ์™„์ „ ์ผ๊ด€๋œ UI ๊ตฌํ˜„
ํ•ซ ๋ฆฌ๋กœ๋”ฉ(Hot Reload) ์ง€์› (Live Reload ํฌํ•จ) ์ง€์› (๋” ๋น ๋ฅด๊ณ  ์•ˆ์ •์ )
3D ๊ทธ๋ž˜ํ”ฝ ์ง€์› ์ƒ๋Œ€์ ์œผ๋กœ ๊ฐ•ํ•จ (๋„ค์ดํ‹ฐ๋ธŒ API ์ ‘๊ทผ ์šฉ์ด) ์ œํ•œ์  (2D ์ค‘์‹ฌ ์œ„์ ฏ ๋ Œ๋”๋ง)
์„ฑ๋Šฅ (Performance) JS Bridge๋กœ ์ธํ•œ ์•ฝ๊ฐ„์˜ ์˜ค๋ฒ„ํ—ค๋“œ ์กด์žฌ ๋„ค์ดํ‹ฐ๋ธŒ ์ˆ˜์ค€์˜ ํผํฌ๋จผ์Šค (ARM ์ฝ”๋“œ๋กœ ์ง์ ‘ ์ปดํŒŒ์ผ)
์ƒํƒœ๊ณ„ ๋ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งค์šฐ ํฌ๊ณ  ์„ฑ์ˆ™ํ•จ โ€” ์ˆ˜๋งŽ์€ ์„œ๋“œํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ณด์œ  ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅ ์ค‘์ด์ง€๋งŒ ์ƒ๋Œ€์ ์œผ๋กœ ์ž‘์Œ
๋ฌธ์„œํ™” / ๊ณต์‹ ์ž๋ฃŒ ๊ณต์‹ ๋ฌธ์„œ๋Š” ๊ฐ„๊ฒฐํ•˜์ง€๋งŒ ์„œ๋“œํŒŒํ‹ฐ ์˜์กด๋„ ๋†’์Œ Google ์ฃผ๋„ ๊ณต์‹ ๋ฌธ์„œ๊ฐ€ ์ž˜ ๊ตฌ์„ฑ๋จ
์„ค์น˜ ๊ณผ์ • Node.js + npm์„ ํ†ตํ•ด ์†์‰ฝ๊ฒŒ ์„ค์น˜ ๊ฐ€๋Šฅ SDK ๋‹ค์šด๋กœ๋“œ ๋ฐ ํ™˜๊ฒฝ๋ณ€์ˆ˜ ์„ค์ • ํ•„์š” (์กฐ๊ธˆ ๋ณต์žกํ•จ)
ํ…Œ์ŠคํŠธ ๋„๊ตฌ Detox ๋“ฑ ์™ธ๋ถ€ ๋„๊ตฌ ํ•„์š” ํ†ตํ•ฉ ํ…Œ์ŠคํŠธ ๊ธฐ๋Šฅ ๋‚ด์žฅ (Unit, Widget, Integration Test)
ํ•™์Šต ๋‚œ์ด๋„ JavaScript ๊ธฐ๋ฐ˜์ด๋ผ ์ง„์ž…์žฅ๋ฒฝ ๋‚ฎ์Œ Dart ์–ธ์–ด ํ•™์Šต ํ•„์š” (์ถ”๊ฐ€ ๋Ÿฌ๋‹ ์ปค๋ธŒ)
์œ ๋ช… ์‚ฌ์šฉ์ž / ๊ธฐ์—… Meta(Facebook, Instagram), Uber, Walmart ๋“ฑ Google, Alibaba, BMW, eBay ๋“ฑ
์ปค๋ฆฌ์–ด / ์—ฐ๋ด‰ (๋ฏธ๊ตญ ํ‰๊ท ) ์•ฝ $93,000 / ๋…„ ์•ฝ $89,000 / ๋…„
๊ฐ•์  ์š”์•ฝ โœ… JavaScript ๊ธฐ๋ฐ˜์œผ๋กœ ์ง„์ž… ์‰ฌ์›€
โœ… ๋„ค์ดํ‹ฐ๋ธŒ UI ํ™œ์šฉ ๊ฐ€๋Šฅ
โœ… ๊ฑฐ๋Œ€ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ
โœ… ์™„์ „ํ•œ ์ผ๊ด€๋œ ๋””์ž์ธ(UI ํ†ต์ผ์„ฑ)
โœ… ๊ณ ์„ฑ๋Šฅ ๋ Œ๋”๋ง
โœ… ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ ๋‚ด์žฅ
์•ฝ์  ์š”์•ฝ โŒ Bridge๋กœ ์ธํ•œ ์„ฑ๋Šฅ ์˜ค๋ฒ„ํ—ค๋“œ
โŒ ์˜์กด์„ฑ ๊ด€๋ฆฌ ๋ณต์žก
โŒ ๋ฌธ์„œํ™” ์ผ๊ด€์„ฑ ๋ถ€์กฑ
โŒ Dart ์–ธ์–ด ์ง„์ž…์žฅ๋ฒฝ
โŒ ์•ฑ ์šฉ๋Ÿ‰ ํผ
โŒ ์ผ๋ถ€ ๋„ค์ดํ‹ฐ๋ธŒ ๊ธฐ๋Šฅ ์ œ์•ฝ

React Native vs Flutter in 2025 - Make the RIGHT Choice (Difference Explained)๋ฅผ ์ฐธ๊ณ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๐Ÿ˜‰

React Native vs Flutter ์–ด๋–ค ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์„ ํƒํ•ด์•ผ ํ• ๊นŒ?

React Native์™€ Flutter๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์ฒ ํ•™์—์„œ ์ถœ๋ฐœํ–ˆ์ง€๋งŒ, ๊ฒฐ๊ตญ ๊ฐ™์€ ๋ชฉํ‘œ๋ฅผ ํ–ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ โ€œํ•œ ๋ฒˆ์˜ ์ฝ”๋“œ๋กœ ๋‘ ํ”Œ๋žซํผ(Android์™€ iOS)์„ ๋™์‹œ์— ์ปค๋ฒ„ํ•˜๋Š” ๊ฒƒโ€์ด์ฃ . ๋‘ ํ”„๋ ˆ์ž„์›Œํฌ ๋ชจ๋‘ ๋›ฐ์–ด๋‚œ ์ƒ์‚ฐ์„ฑ์„ ์ž๋ž‘ํ•˜์ง€๋งŒ, ํŒ€์˜ ๊ธฐ์ˆ  ์Šคํƒ๊ณผ ํ”„๋กœ์ ํŠธ ํŠน์„ฑ์— ๋”ฐ๋ผ ์ ํ•ฉํ•œ ์„ ํƒ์€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœ… React Native๋ฅผ ์„ ํƒํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

  • ์ด๋ฏธ JavaScript๋‚˜ React ์ƒํƒœ๊ณ„์— ์ต์ˆ™ํ•œ ํŒ€์ด๋ผ๋ฉด, React Native๊ฐ€ ํ›จ์”ฌ ๋น ๋ฅธ ์ ์‘๋ ฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ๊ธฐ์กด ์›น ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, React ๊ธฐ๋ฐ˜์˜ UI ํŒจํ„ด์„ ๋ชจ๋ฐ”์ผ๋กœ ํ™•์žฅํ•˜๊ณ ์ž ํ•  ๋•Œ ํŠนํžˆ ๊ฐ•์ ์„ ๋ณด์ž…๋‹ˆ๋‹ค.
  • ๋Œ€๊ทœ๋ชจ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ์˜คํ”ˆ์†Œ์Šค ์ƒํƒœ๊ณ„ ๋•๋ถ„์— ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์†”๋ฃจ์…˜์„ ๋น ๋ฅด๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ์–ด์š”.
  • Meta, Instagram, Uber, Walmart ๋“ฑ ์‹ค์ œ ๋Œ€๊ธฐ์—…์—์„œ๋„ ๊ฒ€์ฆ๋œ ์‚ฌ๋ก€๊ฐ€ ์žˆ์–ด์š”

์•„ ๊ทธ๋ฆฌ๊ณ  ์šฐ๋ฆฌ๊ฐ€ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” Toss๋„ React Native๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์š” ๐Ÿ˜‰

โœ… Flutter๋ฅผ ์„ ํƒํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

  • ๋””์ž์ธ ์ผ๊ด€์„ฑ์ด ์ค‘์š”ํ•˜๊ฑฐ๋‚˜, UI๊ฐ€ ๋ณต์žกํ•œ ์•ฑ์„ ๊ตฌํ˜„ํ•  ๋•Œ Flutter์˜ ์œ„์ ฏ ์‹œ์Šคํ…œ์ด ๋” ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • Dart ์–ธ์–ด์˜ ๋Ÿฌ๋‹ ์ปค๋ธŒ๋Š” ์žˆ์ง€๋งŒ, ํ•œ ๋ฒˆ ์ตํžˆ๋ฉด ์•ˆ๋“œ๋กœ์ด๋“œยทiOSยท์›นยท๋ฐ์Šคํฌํ†ฑ๊นŒ์ง€ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ๋ฒ”์šฉ์„ฑ์ด ์žฅ์ ์ด์—์š”.
  • Skia ๋ Œ๋”๋ง ์—”์ง„ ๋•๋ถ„์— GPU ๊ฐ€์† ๊ธฐ๋ฐ˜์˜ ๊ณ ์„ฑ๋Šฅ UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋น ๋ฅธ ์‹คํ–‰ ์†๋„์™€ ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ํ•„์š”ํ•œ ์•ฑ(์˜ˆ: ๋””์ž์ธ ํˆด, ์‹œ๊ฐํ™” ์„œ๋น„์Šค ๋“ฑ)์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

2025๋…„, "์ •๋‹ต"์€ ์—†์ง€๋งŒ "์ „๋žต"์€ ์žˆ๋‹ค

๊ฒฐ๊ตญ React Native์™€ Flutter๋Š” ์ŠนํŒจ์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. React Native๋Š” ์ด๋ฏธ ์„ฑ์ˆ™ํ•œ ์ƒํƒœ๊ณ„์™€ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์•ˆ์ •์„ฑ์„ ํ™•๋ณดํ–ˆ๊ณ , Flutter๋Š” ์„ฑ๋Šฅ๊ณผ UI ์ผ๊ด€์„ฑ ์ธก๋ฉด์—์„œ ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•˜๋ฉฐ ์ƒˆ๋กœ์šด ์‹œ์žฅ์„ ๋„“ํ˜€๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

React Native๋Š” ์—ฌ์ „ํžˆ โ€œํ˜„์—…์—์„œ ๊ฐ€์žฅ ๋„๋ฆฌ ์“ฐ์ด๋Š” ํฌ๋กœ์Šคํ”Œ๋žซํผ ํ”„๋ ˆ์ž„์›Œํฌโ€์ด๋ฉฐ, Flutter๋Š” โ€œ๋””์ž์ธ ์ค‘์‹ฌ ์•ฑ์˜ ํผํฌ๋จผ์Šค ๋ฆฌ๋”โ€๋กœ ์ž๋ฆฌ ์žก๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ, ํŒ€์˜ ์–ธ์–ด ์—ญ๋Ÿ‰, ๋ฐฐํฌ ํ™˜๊ฒฝ, ๊ทธ๋ฆฌ๊ณ  ์œ ์ง€๋ณด์ˆ˜ ์ „๋žต์„ ๊ณ ๋ คํ•ด โ€œReact Native๋กœ ํ˜„์‹ค์ ์ธ ์†๋„์™€ ์ƒ์‚ฐ์„ฑโ€์„ ํƒํ•  ๊ฒƒ์ธ์ง€, โ€œFlutter๋กœ ๋ฏธ๋ž˜ ์ง€ํ–ฅ์  ์ผ๊ด€์„ฑ๊ณผ ์„ฑ๋Šฅโ€์„ ํƒํ•  ๊ฒƒ์ธ์ง€๋ฅผ ํŒ๋‹จํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•  ๊ฒƒ์œผ๋กœ ๋ณด์ด๋„ค์š”.

๊ทธ๋ž˜์„œ ์ด ๊ธ€์˜ ๋ชฉ์ ์€?

React Native์— ๋Œ€ํ•œ ๋น„ํŒ์ ์ธ ์—ฌ๋ก ๊ณผ ๋”๋ถˆ์–ด ์ด์ œ ๋ง‰ ์•ฑ ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๋Š” ๋ฐ ๋ฌด์กฐ๊ฑด Flutter๋ฅผ ๊ถŒ์žฅํ•˜๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๋‹ค๊ฐ์ ์œผ๋กœ ์ ‘๊ทผํ•˜๋ฉด ์–ด๋–จ๊นŒ ์‹ถ์–ด์„œ ์ž‘์„ฑํ•ด๋ดค์–ด์š”. ๊ธฐ์ˆ  ์„ ํƒ์˜ ๋ชซ์€ ์—ฌ๋Ÿฌ๋ถ„์ด์ง€๋งŒ, React Native๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๋ฐ์— ๋น„๊ด€์ ์ธ ์—ฌ๋ก  ๋•Œ๋ฌธ์— ์ฃผ์ €ํ•œ๋‹ค๋ฉด ์ด ๊ธ€์ด ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜‰ (์ผ๋‹จ ์ „ Flutter ๋ฐฐ์šฐ๋Ÿฌ ๊ฐ€๋ณผ๊ฒŒ์š”.)

React Native๋Š” ๋งํ–ˆ๋‹ค? ์ง€์› ์ค‘๋‹จ์ด๋‹ค? ์ „ํ˜€ ์•„๋‹™๋‹ˆ๋‹ค.