๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿš€ Development/React Native

React Native์˜ ํŠน์ง• ๋ฐ ์žฅ์  / ํ™œ์šฉ

by Jay Din 2023. 6. 15.
728x90
๋ฐ˜์‘ํ˜•
๋ฐ˜์‘ํ˜•

React Native์˜ ํŠน์ง• ๋ฐ ์žฅ์ 

1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ XML์„ ์ถ”๊ฐ€ํ•œ ํ™•์žฅํ˜• ๋ฌธ๋ฒ•์ธ JSX(Javascript XML)๋ฅผ ์‚ฌ์šฉ

React native๋Š” JSX๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ˆœ์ˆ˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ,

React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ค‘์š”ํ•œ ์ด์œ  ์ค‘ ํ•˜๋‚˜๊ฐ€ ‘์ง๊ด€์ ’์ด๋ผ์„œ JSX๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ์‰ฝ๊ฒŒ ์ ์‘ํ•  ์ˆ˜ ์žˆ๋‹ค.

* ์ง๊ด€์ ->๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ํ™”๋ฉด์— ์–ด๋–ค UI๊ฐ€ ๊ทธ๋ ค์งˆ์ง€ ์ถฉ๋ถ„ํžˆ ์˜ˆ์ƒ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ

2. ์†Œ์Šค์ฝ”๋“œ ์žฌ์‚ฌ์šฉ๊ณผ ์ƒ์‚ฐ์„ฑ.

๋ฆฌ์•กํŠธ๋Š” Component ๊ธฐ๋ฐ˜์œผ๋กœ ๊ธฐ๋Šฅ์„ ๋ถ„๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ์ด๋‹ค.

๊ธฐ์กด์— ๋ฆฌ์•กํŠธ๋กœ ๊ฐœ๋ฐœ๋œ ์‚ฌ์ดํŠธ์—์„œ Component ์ฝ”๋“œ๋ฅผ ๊ทธ๋Œ€๋กœ ์žฌ์‚ฌ์šฉํ•˜๊ณ  ์ž‘์„ฑ๋œ ์ฝ”๋“œ ํ•˜๋‚˜๋กœ iOS, Android๋ฅผ ๋™์‹œ์— ๊ฐœ๋ฐœํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์‚ฐ์„ฑ์ด ์˜ฌ๋ผ๊ฐ„๋‹ค.

3. ๋น„์šฉ๊ณผ ์˜คํ”ˆ์†Œ์Šค.

๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๊ฐœ๋ฐœ๋น„์šฉ๊ณผ ์œ ์ง€๋ณด์ˆ˜ ๋น„์šฉ์ด ์ค„์–ด๋“ ๋‹ค.

๋˜ํ•œ, ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ๋ธ”๋กœ๊ทธ๊ฐ€ ํ™œ์„ฑํ™” ๋˜์–ด์žˆ์–ด ์˜คํ”ˆ ์†Œ์Šค ์ •๋ณด๊ฐ€ ๋งŽ๋‹ค.

4. Fast Refresh

๋ณ€๊ฒฝ๋œ ์ฝ”๋“œ๋ฅผ ์ €์žฅํ•˜๊ธฐ๋งŒ ํ•ด๋„ ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝ๋œ ๋‚ด์šฉ์ด ํ™”๋ฉด์— ์ ์šฉ๋œ๋‹ค.

์ด ๊ธฐ๋Šฅ์œผ๋กœ (์ˆ˜์ •>์ปดํŒŒ์ผ>์ƒˆ๋กœ๊ณ ์นจ)๋“ฑ์˜ ์ž‘์—…์„ ์ƒ๋žตํ•˜๊ณ  ๋ถˆํ•„์š”ํ•œ ์ž‘์—…์‹œ๊ฐ„์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

5. ์„ฑ๋Šฅ ์ €ํ•˜ ๋ฌธ์ œ ํ•ด๊ฒฐ

์ž‘์„ฑ๋œ ์ฝ”๋“œ์— ๋”ฐ๋ผ ๊ฐ ํ”Œ๋žซํผ์— ์•Œ๋งž์€ ๋„ค์ดํ‹ฐ๋ธŒ ์—˜๋ฆฌ๋จผํŠธ๋กœ ์ „ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ํฐ ์„ฑ๋Šฅ ์ €ํ•˜ ์—†์ด ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

6. ๋„ค์ดํ‹ฐ๋ธŒ ์†์„ฑ ์ด์šฉ ๊ฐ€๋Šฅ

๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ ์ด์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

 

React Native ํ™œ์šฉ

Facebook, AirBnb, Dropbox, Twitter, Instagram, Uber๋“ฑ ์ˆ˜๋งŽ์€ ๊ธฐ์—…๋“ค์ด ์‚ฌ์šฉํ•œ๋‹ค.

ํฌ๋กœ์Šค ํ”Œ๋žซํผ

“๊ต์ฐจ”๋ฅผ ๋œปํ•˜๋Š” “Cross”์™€ Platform์˜ ํ•ฉ์„ฑ์–ด๋กœ, ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป์„ ๊ฐ€์ง„๋‹ค.

React Native๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ, iOS๋ฅผ ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๊ฐœ๋ฐœ ํ•  ์ˆ˜ ์žˆ๋Š” ํฌ๋กœ์Šค ํ”Œ๋žซํผ์ด๋‹ค.

โ€‹

๋ฐ˜์‘ํ˜•

 

 

728x90
๋ฐ˜์‘ํ˜•