๐ 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์ ๋ฏธ๋๊ฐ ๋๋์ฑ ๊ธฐ๋๋๋ค์.
๋นจ๋ฆฌ ์ด ํผ๋ํ ์ํฉ์ด ์์ ํ ๋๊ณ ๋ฉ์ด์ ๋ฒ์ ๊น์ง ์ฌ๋ผ๊ฐ์ ์ ๋ ๋ ํ ๋ฐฅ์ค์ด ๋์ด์คฌ์ผ๋ฉด ํฉ๋๋ค.
'React-Native' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React Native] Android Native-Module Event Listener ๋ง๋ค๊ธฐ (0) | 2025.01.10 |
---|---|
[React-Native] ScrollView ์คํฌ๋กค ๋ฒ๋ฒ ์ ์ต์ ํํ๊ธฐ (2) | 2023.10.14 |
[React-Native] BackHandler, ๋ค๋ก ๊ฐ๊ธฐ ์ ์ฑ ์ข ๋ฃ ๋ฌป๊ธฐ (0) | 2023.07.21 |
[React-Native + TypeScript] Stack Navigation, ์คํ ๋ค๋น๊ฒ์ด์ ์ฌ์ฉ๋ฒ (1) | 2023.07.18 |
React Native ์ฅ๋จ์ ๊ณผ CLI, Expo ๋น๊ต์ ํ๊ธฐ (0) | 2023.07.13 |
๋๊ธ