React

[React] React์˜ ์žฅ๋‹จ์ 

YunCod 2024. 1. 31. 23:39

๐Ÿ“Œ์žฅ์ 

1. ๋†’์€ ์ž์œ ๋„

  • ํƒœ์ƒ ์ž์ฒด๊ฐ€ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์•„๋‹ˆ๋ผ Javascript์–ธ์–ด ๊ธฐ๋ฐ˜์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž๊ฐ€ ๋•Œ๋งˆ๋‹ค ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ๊ณจ๋ผ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
  • ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘ ๋‹จ๊ณ„์—์„œ๋„ ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ํŒŒ์ผ ๋‚ด์—์„œ ํ•จ์ˆ˜๋ฅผ export๋งŒ ํ•ด์ฃผ๋ฉด ๋ชจ๋‘ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ€์ ธ๋‹ค ์“ธ ์ˆ˜ ์žˆ์Œ. (Vue์™€ Svelte์˜ ๊ฒฝ์šฐ ํ•˜๋‚˜์˜ ํŒŒ์ผ ๋‹น ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋งŒ ์ •์˜ ๊ฐ€๋Šฅ)

2. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ์•„ํ‚คํ…์ฒ˜

  • ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘์œผ๋กœ ์ƒ์‚ฐ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ด
  • ํŒŒ์ผ ๋‚ด์—์„œ ์ƒˆ๋กœ์šด ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅ

3. ์„ฑ๋Šฅ ์ตœ์ ํ™”

  • Virtual DOM์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋ง์„ ์ตœ์ ํ™”
  • ์ปดํฌ๋„ŒํŠธ ๋ ˆ๋ฒจ์—์„œ useMemo, useCallback๋ฅผ ์ด์šฉํ•œ ์ตœ์ ํ™”๋ฅผ ์ œ๊ณต
  • React.lazy์™€ Suspense๋ฅผ ์ด์šฉํ•œ ์ฝ”๋“œ ๋ถ„ํ•  ๋ฐ ์ง€์—ฐ ๋กœ๋”ฉ ๊ธฐ๋Šฅ์„ ์ œ๊ณต

 

๐Ÿ“Œ๋‹จ์ 

1. ๋ณ„๋„์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”

  • React๋Š” View(MVC ํŒจํ„ด ์ค‘ View)์— ์ดˆ์ ์„ ๋งž์ถ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฏ€๋กœ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด์•ผํ•˜๊ฑฐ๋‚˜, ๋ผ์šฐํŒ…์ด๋‚˜ ์ƒํƒœ๊ด€๋ฆฌ์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ถ”๊ฐ€๋กœ ์„ค์น˜ํ•ด์•ผ ํ•œ๋‹ค.

2. ๋А๋ฆฐ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„

  • React๋Š” Javascript๊ฐ€ html์„ ๊ทธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ ์•ฑ์— ์ ‘์†ํ–ˆ์„ ๋•Œ์—๋Š” ๋นˆ html์„ ๋ฐ›๊ฒŒ ๋˜๋ฉฐ, Javascript์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ๊นŒ์ง€ ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ์†Œ์š”๋œ๋‹ค.
  • ํ•ด๊ฒฐ์ฑ… : Server-side Rendering์„ ์ ์šฉํ•˜์—ฌ ํ•„์ˆ˜ ์ปจํ…์ธ ๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฏธ๋ฆฌ ๋ณด์—ฌ์ฃผ๊ธฐ, ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ ์ค„์ด๊ธฐ(ํฐํŠธ, ์ด๋ฏธ์ง€ ์ตœ์ ํ™”, Suspense / React.lazy์‚ฌ์šฉ) ๋“ฑ