๋ฆฌ์•กํŠธ์˜ ํž˜: ๊ณ ์„ฑ๋Šฅ ์›น ์•ฑ ๊ฐœ๋ฐœ

2023. 11. 19. 23:00ใ†Development๐Ÿ‘ฉ๐Ÿป‍๐Ÿฆณ/Tutorial

 

 

๋ฆฌ์•กํŠธ(React)๋Š” ์ธ๊ธฐ ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ์›น๊ณผ ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. 

 

๋ฆฌ์•กํŠธ์˜ ์ฃผ์š” ์žฅ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜: ๋ฆฌ์•กํŠธ๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ UI๋ฅผ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค. 

์ด๋Š” ์ฝ”๋“œ์˜ ๊ด€๋ฆฌ์™€ ์œ ์ง€ ๋ณด์ˆ˜๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•˜๋ฉฐ, ํฌ๊ณ  ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋” ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค.

์„ ์–ธ์  UI: ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์•ผ ํ• ์ง€ ์„ ์–ธ์ ์œผ๋กœ ๊ธฐ์ˆ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

์ด๋Š” ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๋ฉฐ, ๋””์ž์ธ๊ณผ ์ฝ”๋“œ ๊ฐ„์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

๊ฐ€์ƒ DOM: ๋ฆฌ์•กํŠธ๋Š” ๊ฐ€์ƒ DOM์„ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์ œ DOM์— ๋Œ€ํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. 

์ด๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ , ๋น ๋ฅธ UI ์—…๋ฐ์ดํŠธ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ•๋ ฅํ•œ ์ƒํƒœ๊ณ„์™€ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›: ๋ฆฌ์•กํŠธ๋Š” ๋งค์šฐ ํ™œ๋ฐœํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ๊ด‘๋ฒ”์œ„ํ•œ ์ƒํƒœ๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด, 

๋‹ค์–‘ํ•œ ์ถ”๊ฐ€ ๋„๊ตฌ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๊ทธ๋ฆฌ๊ณ  ํ’๋ถ€ํ•œ ํ•™์Šต ์ž๋ฃŒ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ ์—ฐ์„ฑ๊ณผ ํ˜ธํ™˜์„ฑ: ๋ฆฌ์•กํŠธ๋Š” ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ, 

๊ธฐ์กด ์ฝ”๋“œ์™€ ์‰ฝ๊ฒŒ ํ†ตํ•ฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ์ง€์›: ๋ฆฌ์•กํŠธ๋Š” ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ์ง€์›ํ•˜์—ฌ, 

์ดˆ๊ธฐ ๋กœ๋”ฉ ์‹œ๊ฐ„์„ ๋‹จ์ถ•์‹œํ‚ค๊ณ  ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•๋ ฅํ•œ ๋„๊ตฌ ๋ฐ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ: ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์ž๋Š” 

ํฌ๋กฌ ๋ฐ ํŒŒ์ด์–ดํญ์Šค์šฉ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์™€ ๊ฐ™์€ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ์–ด 

๋””๋ฒ„๊น…๊ณผ ๊ฐœ๋ฐœ ๊ณผ์ •์ด ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ์žฅ์ ๋“ค๋กœ ์ธํ•ด ๋ฆฌ์•กํŠธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ์žˆ์–ด์„œ ๋งค์šฐ ์ธ๊ธฐ ์žˆ๋Š” ์„ ํƒ์ด ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


๋ฆฌ์•กํŠธ(React) ์ž์ฒด๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ง€๋งŒ, 

 

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ(React Native)๋ผ๋Š” ๊ด€๋ จ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ
์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋“œ๋กœ์ด๋“œ(Android)์™€ iOS์—์„œ ๊ตฌ๋™๋˜๋Š” ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.  

 

 



๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์˜ ์ฃผ์š” ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

ํฌ๋กœ์Šค ํ”Œ๋žซํผ ๊ฐœ๋ฐœ: ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด 

ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋ฒ ์ด์Šค๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS ์–‘์ชฝ ํ”Œ๋žซํผ์—์„œ ๋™์ž‘ํ•˜๋Š” ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

์ด๋Š” ๊ฐœ๋ฐœ ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์„ ์ค„์ด๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

๋„ค์ดํ‹ฐ๋ธŒ ์ปดํฌ๋„ŒํŠธ: ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๊ฐ ํ”Œ๋žซํผ์˜ ๋„ค์ดํ‹ฐ๋ธŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ฑ์„ ๋นŒ๋“œํ•ฉ๋‹ˆ๋‹ค. 

์ด๋Š” ์•ฑ์ด ๊ฐ ํ”Œ๋žซํผ์˜ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์ฒ˜๋Ÿผ ๋ณด์ด๊ณ  ๋™์ž‘ํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

ํ•ซ ๋ฆฌ๋กœ๋”ฉ: ๊ฐœ๋ฐœ ์ค‘์— ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๋ฉด, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์žฌ์‹œ์ž‘ํ•˜์ง€ ์•Š๊ณ ๋„ ์ฆ‰์‹œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

์ด๋Š” ๊ฐœ๋ฐœ ์†๋„๋ฅผ ๋†’์—ฌ์ค๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ์˜ ์žฅ์ : ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๋ฆฌ์•กํŠธ์˜ ๋ชจ๋“  ์žฅ์ ์„ ๊ทธ๋Œ€๋กœ ์ด์–ด๋ฐ›์Šต๋‹ˆ๋‹ค, 

์ฆ‰ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ์•„ํ‚คํ…์ฒ˜, ์„ ์–ธ์  UI, ๊ฐ€์ƒ DOM ๋“ฑ์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•๋ ฅํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€ ์ƒํƒœ๊ณ„: ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ์—ญ์‹œ ๋ฆฌ์•กํŠธ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ 

๊ฐ•๋ ฅํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์›๊ณผ ๊ด‘๋ฒ”์œ„ํ•œ ์ƒํƒœ๊ณ„๋ฅผ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค.

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