๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
React-Native

2025๋…„ React Native ํ˜„ํ™ฉ๊ณผ CLI vs Expo ๋น„๊ต๋ถ„์„

by LasBe 2025. 1. 15.
๋ฐ˜์‘ํ˜•

๐Ÿ“’ 2025๋…„ React Native ํ˜„ํ™ฉ๊ณผ CLI vs Expo Go ๋น„๊ต๋ถ„์„


2023.07.13 - [React-Native] - React Native ์žฅ๋‹จ์ ๊ณผ CLI, Expo ๋น„๊ต์™€ ํ›„๊ธฐ
์ด ๊ธ€์„ ์“ด ์ง€๋„ ์–ด์–ธ 1๋…„ ํ•˜๊ณ ๋„ 6๊ฐœ์›”์ด ์ง€๋‚ฌ์Šต๋‹ˆ๋‹ค.
 
๊ทธ๋™์•ˆ ํ”Œ๋Ÿฌํ„ฐ๊ฐ€ ์น˜๊ณ  ์˜ฌ๋ผ์˜ค๋ฉฐ RN์€ ์ด์ œ ์ฃฝ์—ˆ๋‚˜ ์ƒ๊ฐ์ด ๋“ค ๋•Œ๋งˆ๋‹ค ๋ฌด์–ธ๊ฐ€ ํ•˜๋‚˜์”ฉ ๋“ฑ์žฅํ•˜๋ฉฐ ์—Ž์น˜๋ฝ๋’ค์น˜๋ฝํ•˜๋Š” ์ƒํ™ฉ์ด ๋ฐ˜๋ณต๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
์ •๋ง ์งง์€ ์‹œ๊ฐ„์ด์—ˆ์ง€๋งŒ ๊ทธ๋™์•ˆ RN์ด 0.76 ๋ฒ„์ „๊นŒ์ง€ ์˜ฌ๋ผ์˜ค๋ฉฐ ์–ด๋–ค ๋ณ€๊ฒฝ์ ๋“ค์ด ์žˆ์—ˆ๋Š”์ง€ ์•Œ์•„๋ณด๊ณ , ์ด์ œ๋Š” Expo๋ฅผ ๋งˆ์Œ ๋†“๊ณ  ์‚ฌ์šฉํ•ด๋„ ๋ ์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
 

๐Ÿ“Œ Hermes Engine

https://reactnative.dev/architecture/bundled-hermes
Hermes๋Š” Meta์—์„œ ๊ฐœ๋ฐœํ•œ React Native์— ์ตœ์ ํ™”๋œ JavaScript ์—”์ง„์ž…๋‹ˆ๋‹ค.
2019๋…„ React Native 0.60.4 ๋ฒ„์ „์—์„œ ์ฒ˜์Œ ๋„์ž…๋˜์—ˆ์œผ๋ฉฐ, 0.70 ๋ฒ„์ „๋ถ€ํ„ฐ๋Š” ๊ธฐ๋ณธ ์—”์ง„์œผ๋กœ ์„ค์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
๋Ÿฐํƒ€์ž„์— ์ปดํŒŒ์ผ์„ ์‹คํ–‰ํ•˜๋Š” ๊ธฐ์กด JIT(Just-In-Time) ์ปดํŒŒ์ผ๋Ÿฌ์—์„œ, JS ์ฝ”๋“œ๋ฅผ ๋นŒ๋“œ ํƒ€์ž„์— ๋ฐ”์ดํŠธ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” AOT(Ahead-Of-Time)์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๋„์ž…ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ด์ ๋“ค์„ ๊ฐ€์ ธ๊ฐ”์Šต๋‹ˆ๋‹ค.

  • ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ ๊ธฐ์ˆ ์„ ํ†ตํ•ด ๊ธฐ์กด ์—”์ง„๋ณด๋‹ค ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์„ ์ตœ๋Œ€ 50% ๊ฐ์†Œ
  • ์ฝ”๋“œ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์••์ถ•ํ•˜์—ฌ ์•ฑ ํฌ๊ธฐ ๊ฐ์†Œ

ํ•˜์ง€๋งŒ ์•„์ง๋„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€์˜ ํ˜ธํ™˜์„ฑ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹จ ์–˜๊ธฐ๋“ค์ด ์žˆ์–ด์„œ ๋„์ž…์€ ์‹ ์ค‘ํ•˜๊ฒŒ ๊ณ ๋ฏผํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
 

๐Ÿ“Œ New Architecture

https://reactnative.dev/architecture/landing-page
New Architecture๋Š” 2018๋…„๋ถ€ํ„ฐ ๊ฐœ๋ฐœ๋˜์–ด 2024๋…„ 0.76 ๋ฒ„์ „๋ถ€ํ„ฐ ๊ธฐ๋ณธ์œผ๋กœ ์ ์šฉ๋ผ ์—„์ฒญ๋‚œ ๋ณ€ํ™”๋ฅผ ๋งž์ดํ–ˆ์Šต๋‹ˆ๋‹ค.
๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๋งŽ์•„ ๋Œ€๋žต์ ์œผ๋กœ ์„ค๋ช…๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ”Ž JSI(JavaScript Interface) ๋„์ž…

๊ธฐ์กด JS์™€ ๋„ค์ดํ‹ฐ๋ธŒ ์‚ฌ์ด ํ†ต์‹ ์„ ๋‹ด๋‹นํ–ˆ๋˜ ๋ธŒ๋ฆฟ์ง€๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  JSI๊ฐ€ ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
 
๋ธŒ๋ฆฟ์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

  • ์Šค๋ ˆ๋“œ ๊ฐ„ JSON์„ ์ง๋ ฌํ™”, ์—ญ์ง๋ ฌํ™”ํ•˜๋Š” ๊ณผ์ •์—์„œ ๋งŽ์€ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋ฐœ์ƒ
  • ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ž‘๋™ํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ๋Œ€๊ธฐ ์‹œ๊ฐ„ ๋ฐœ์ƒ
  • ๋‹จ์ผ ์Šค๋ ˆ๋“œ ์ž‘์—…์œผ๋กœ ๋ณ‘๋ชฉ ํ˜„์ƒ ๋ฐœ์ƒ

 
JSI๋ฅผ ๋„์ž…ํ•˜๋ฉฐ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ด์ ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • JSON ์ง๋ ฌํ™” ๊ณผ์ • ์—†์ด ๋น ๋ฅธ ํ†ต์‹  ๊ฐ€๋Šฅ
  • ๋™๊ธฐ์  ํ†ต์‹ ์œผ๋กœ UI์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์ด ๋”์šฑ ๋ถ€๋“œ๋Ÿฌ์›Œ์ง
  • ๋ธŒ๋ฆฟ์ง€๋ฅผ ํ†ตํ•œ ๋ถˆํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ๋ณต์‚ฌ๊ฐ€ ์ค„์–ด๋“ค์–ด ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉ

ํ˜ธํ™˜์„ฑ ๊ด€๋ จํ•ด์„  ์ง์ ‘ ์‚ฌ์šฉํ•ด ๋ณด๋ฉฐ ๋งž์•„๋ด์•ผ ์•Œ๊ฒ ์ง€๋งŒ, Hermes ์—”์ง„๊ณผ New Architecture ๋„์ž…์œผ๋กœ ํ”Œ๋Ÿฌํ„ฐ์˜ ์„ฑ๋Šฅ์ด ๋น„์Šทํ•œ ์ˆ˜์ค€์— ๋„๋‹ฌํ–ˆ๋‹ค๊ณ  ํ•˜๋‹ˆ ์žฅ์กฑ์˜ ๋ฐœ์ „์ด ์•„๋‹ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
 

๐Ÿ“Œ "React Native CLI" vs "Expo"

Expo์˜ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ฒฝํ—˜์ด ์ข‹๋‹ค๋Š”๊ฑด ๋„ˆ๋ฌด๋‚˜ ์œ ๋ช…ํ•œ ์ด์•ผ๊ธฐ์ด๊ณ , ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋ง์”€๋“œ๋ฆฌ๋ฉด Eject๋ฅผ ๊ฐ์˜คํ•˜๊ณ ์„œ๋ผ๋„ ์ƒˆ๋กœ ์‹œ์ž‘ํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋Š” Expo๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค.
์ด์œ ๋“ค์„ ํ•˜๋‚˜์”ฉ ์„ค๋ช…๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๐Ÿ”Ž React Native ๊ณต์‹๋ฌธ์„œ

์šฐ์„  ์ตœ๊ทผ RN Native Module ์˜ˆ์ œ๋ฅผ ๋งŒ๋“œ๋ ค๊ณ  ํ”„๋กœ์ ํŠธ ์„ค์น˜ ๋ฐฉ๋ฒ•์„ ์ฐพ์œผ๋ ค ํ™˜๊ฒฝ ๊ตฌ์„ฑ ๊ณต์‹๋ฌธ์„œ์— ์ ‘์†ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค.
https://reactnative.dev/docs/environment-setup
 
Expo๋Š” ์•„์ง ๋ฉ€์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ ์ €์—๊ฒŒ ๊ณต์‹๋ฌธ์„œ์— ์ ํžŒ ๋ง๋“ค์€ ๊ฝค๋‚˜ ๋†€๋ผ์› ์Šต๋‹ˆ๋‹ค.
 

 
์ฒซ๋ฒˆ์งธ๋กœ ๊ณต์‹๋ฌธ์„œ์—์„œ Expo๋ฅผ ์˜คํ”ผ์…œ๋กœ React Native ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๊ณ  ํ‘œ๊ธฐํ•ด ๋‘ ๊ณผ ๋”๋ถˆ์–ด ๊ถŒ์žฅํ•˜๋Š” ๋ชจ์Šต์ž…๋‹ˆ๋‹ค.
 

๋‘ ๋ฒˆ์งธ๋กœ CLI ์„ค์น˜ ๋ช…๋ น์–ด๋ฅผ ๋‹ค๋ฅธ ํŽ˜์ด์ง€์— ์ˆจ๊ฒจ๋‘๊ณ  Expo ์„ค์น˜ ๋ช…๋ น์–ด๋ฅผ ๋จผ์ € ํ™•์ธํ•˜๋„๋ก ๋ฐฐ์น˜ํ–ˆ์Šต๋‹ˆ๋‹ค.
 
๋„๋Œ€์ฒด ๊ณต์‹๋ฌธ์„œ์—์„œ ์™œ ์ด๋ ‡๊ฒŒ๊นŒ์ง€ ๊ฐ•์กฐํ•˜๋‚˜ ์‹ถ์–ด ์ฐพ์•„๋ณด๋‹ˆ ์ตœ๊ทผ์—๋Š” RN์€ ์ฝ”์–ด ์ชฝ์„ ์ง‘์ค‘์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๊ณ  Expo์—์„œ๋Š” ์ฝ”์–ด ๊ธฐ๋Šฅ์„ ์ด์šฉํ•ด ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋˜์–ด๊ฐ€๋Š” ์ถ”์„ธ์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
 

๐Ÿ”Ž Expo ์ƒํƒœ๊ณ„์˜ ๋ฐœ์ „

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

๐Ÿ”Ž CodePush์˜ ์ง€์› ์ข…๋ฃŒ

๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ 25๋…„ 3์›”์— ๊ณต์‹์ ์œผ๋กœ CodePush ์„œ๋น„์Šค ์ข…๋ฃŒ๋ฅผ ์•Œ๋ ธ์Šต๋‹ˆ๋‹ค.
์ •๋ง ๋ˆˆ์•ž์œผ๋กœ ๋‹ค๊ฐ€์™”๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์€๋ฐ, ๋ฐœํ‘œํ•œ CodePush StandAlone์— ๋Œ€ํ•ด ์ฐพ์•„๋ณด๋‹ˆ MS Azure๊ฐ€ ๊ฐ•์ œ๋˜์–ด ๋ณด์ด๊ณ , ์•„์ง ์ปค๋ฎค๋‹ˆํ‹ฐ๋„ ํ™œ์„ฑํ™”๋˜์ง€ ์•Š์•„ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ๊ฝค๋‚˜ ์–ด๋ ค์›€์ด ์žˆ์„ ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.
 
ํ•˜์ง€๋งŒ Expo์—์„œ๋Š” CodePush์™€ ์œ ์‚ฌํ•œ ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜ expo publish, expo update๋ฅผ ์ œ๊ณตํ•˜๊ธฐ์— ์žฆ์€ JS์ฝ”๋“œ ๋ฐ ์—์…‹ ๋ณ€๊ฒฝ์„ ์œ ์—ฐํ•˜๊ฒŒ ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
 

๐Ÿ“Œ ๋งˆ๋ฌด๋ฆฌํ•˜๋ฉฐ

์•„์ง๋„ Hermes ์—”์ง„๊ณผ New Architecture์˜ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ, ๋ฒ„์ „์— ๋”ฐ๋ฅธ ๊ฐ์ข… ์—๋Ÿฌ, ๋ช‡๋…„์งธ ๋ฐฉ์น˜๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ์ฐพ์•„๋ณด๋ฉด ์ˆ˜๋…„ ์ „์— ์ž‘์„ฑ๋œ ์ฐธ๊ณ  ๊ธ€๋“ค์€ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ดด๋กญ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ ‡์ง€๋งŒ ๋„ˆ๋ฌด๋‚˜ ํ›Œ๋ฅญํ•œ ์ƒ์‚ฐ์„ฑ๊ณผ ๋น ๋ฅธ ๋ฐœ์ „์†๋„๋ฅผ ๋ณด๊ณ  ์žˆ์œผ๋‹ˆ RN์˜ ๋ฏธ๋ž˜๊ฐ€ ๋”๋”์šฑ ๊ธฐ๋Œ€๋˜๋„ค์š”.
๋นจ๋ฆฌ ์ด ํ˜ผ๋ž€ํ•œ ์ƒํ™ฉ์ด ์•ˆ์ •ํ™” ๋˜๊ณ  ๋ฉ”์ด์ € ๋ฒ„์ „๊นŒ์ง€ ์˜ฌ๋ผ๊ฐ€์„œ ์ œ ๋“ ๋“ ํ•œ ๋ฐฅ์ค„์ด ๋˜์–ด์คฌ์œผ๋ฉด ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€


์˜คํ”ˆ ์ฑ„ํŒ