๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
React ์‹œ๋ฆฌ์ฆˆ๐ŸŒ/React Native๋กœ ๋‚ ์”จ์•ฑ ๋งŒ๋“ค๊ธฐ

โ˜€๏ธReact Native ๋ฐฉ์‹: expo ์™€ react native cli ์ •๋ฆฌโ˜€๏ธ

by @ENFJ 2021. 8. 16.

React Native ๋ฐฉ์‹์—๋Š” 2๊ฐœ๊ฐ€ ์žˆ๋‹ค.

 

1. expo

2. React Native CLI


expo  ์™€ ๋ฆฌ์—‘ํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ๋ž‘ ์–ด๋–ค ๊ด€๋ จ์ด ์žˆ์„๊นŒ?

 

๊ธฐ๋ณธ์ ์œผ๋กœ expo ๋Š” create-react-app ๊ฐ™์€๊ฑฐ๋‹ค.

expo ๋Š” ๋ฆฌ์—‘ํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์œ„ํ•œ ์„ค์ • ํŒŒ์ผ๊ฐ™์€ ๊ฒƒ๋“ค์ด ์—†๋Š” ๋ฐฉ์‹์œผ๋กœ, ๋ชจ๋“ ๊ฒƒ์ด ์…‹์—…์ด ๋˜์–ด์žˆ๋‹ค.

 

๋ฆฌ์—‘ํŠธ๋„ค์ดํ‹ฐ๋ธŒ cli ๋ฐฉ์‹์€ ๋„ˆ๊ฐ€ native files๋“ค์„ ๋” ๋งŽ์ด ์ปจใ…Œ๋กค ํ•˜๊ณ  ์‹ถ์„๋•Œ๋ฅผ ์œ„ํ•œ๊ฒƒ.

๋ฆฌ์—‘ํŠธ๋„ค์ดํ‹ฐ๋ธŒ cli ์œผ๋กœ ์ž‘์—…ํ• ๋•Œ,  ์ž‘์„ฑ์ž ๋Œ€์‹  Xcode ํŒŒ์ผ์„ ์ƒ์„ฑํ• ๊บผ๊ณ , Xcode๋Š” ios๊ณ ,..

 


 

expo๋Š” 

 

1. ๋ชจ๋“  native files ๋“ค์„ ์ˆจ๊ธฐ๊ณ 

2. ๋ชจ๋“ ๊ฑธ ๊ด€๋ฆฌํ•ด์คŒ

3. expo์˜ ๊ฐ€์žฅ ํฐ ์žฅ์ : ํœด๋Œ€ํฐ์—์„œ ์•ฑ์„ ํ…Œ์ŠคํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค

4. expo์˜ ์œ ์ผํ•œ ๋ฌธ์ œ์ : native files๋“ค์„ ํฌ๊ฒŒ ์ œ์–ด ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ 

5. expo ๋Š” ๋” ๋‚˜์€ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ณ , ์šฐ๋ฆฌ๊ฐ€ ์•ฑ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์„ ์ฒ˜๋ฆฌํ•ด์คŒ, ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ ์ฒ˜๋ฆฌํ•˜๊ณ ,

react native ์—…๋ฐ์ดํŠธ๋„ ์ฒ˜๋ฆฌํ•ด์ฃผ๊ณ , ๋ฌธ์„œ๋„ ์ •๋ง ์ž˜ ๋˜์–ด ์žˆ์Œ.

6. react native ๋ณด๋‹ค ๋” ๋งŽ์€ ๋ชจ๋“ˆ๋“ค์ด ์žˆ๋‹ค.

7. building process๋ฅผ ์ฒ˜๋ฆฌํ•ด์คŒ -> ios์™€ ์•ˆ๋“œ๋กœ์ด๋“œ๋ฅผ ์œ„ํ•œ ์•ฑ์„ ๋นŒ๋“œํ•ด์คŒ. ์šฐ๋ฆฐ ์•„๋ฌด๊ฒƒ๋„ ์•ˆํ•ด๋„ ๋จ.

 

=> expo ๋Š” ์ˆ˜๋™์ ์ธ ์ž‘์—…๋“ค์ด ๋œ ํ•„์š”ํ•˜๊ณ , ์‹œ์ž‘ํ•˜๋Š”๋ฐ ํ›จ์”ฌ ๋” ๋น ๋ฅธ ๋ฐฉ์‹์ด๋‹ค.

๋Œ€์‹ , native ํŒŒ์ผ์— ์ ‘๊ทผ์ด ์—†์–ด์„œ ํ•œ๊ณ„๊ฐ€ ์žˆ๊ธดํ•˜๋‹ค.

๊ทธ๋ ‡์ง€๋งŒ ๋Œ€๋ถ€๋ถ„ react native ๊ฐœ๋ฐœ์ž๋“ค์€ native files ์ด ๊ทธ๋ ‡๊ฒŒ ํ•„์š”๊ฐ€ ์—†๋‹ค๊ณ  ํ•จ.

 

๋Œ€๋ถ€๋ถ„์ด ํšŒ์‚ฌ, ํฐํšŒ์‚ฌ~๋“ค์€ native files ์ด ํ•„์š”ํ•˜๋‹ค. ๋ถ„์„์ด๋‚˜ ๋“ฑ๋“ฑ์„ ์œ„ํ•ด์„œ.

 

 

[์‚ฌ์ดํŠธ ์ฃผ์†Œ]
React Native:
https://reactnative.dev/

React Native API : https://reactnative.dev/docs/accessibilityinfo
Expo: https://expo.io/
Expo API : https://docs.expo.io/versions/latest/