๊ธ€ ์ž‘์„ฑ์ž: ํƒ์‹œ ์šด์ „์‚ฌ
๋ฐ˜์‘ํ˜•

๐Ÿค” ๋ฆฌ์•กํŠธ๋ž€?

๋ฆฌ์•กํŠธ(React, React.js ๋˜๋Š” ReactJS)๋Š” ์„ ์–ธ์ , ํšจ์œจ์ ์œผ๋กœ ์œ ์—ฐํ•˜๊ฒŒ ์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํ•˜๋‚˜๋กœ, ํŽ˜์ด์Šค๋ถ๊ณผ ๊ฐœ๋ณ„ ๊ฐœ๋ฐœ์ž ๋ฐ ๊ธฐ์—…๋“ค ๊ณต๋™์ฒด์— ์˜ํ•ด ์œ ์ง€๋ณด์ˆ˜๋˜๋ฉฐ ์ง€๊ธˆ๋„ ๊ณ„์† ์—…๋ฐ์ดํŠธ ์ค‘์ธ ํ”„๋กœ์ ํŠธ์ด๋‹ค.

๋ฆฌ์•กํŠธ์˜ ๊ฐœ๋…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ•จ์ˆ˜๋กœ ํ‘œํ˜„ ๊ฐ€๋Šฅํ•˜๋‹ค.

f(data) = View

ํŽ˜์ด์ง€์— ๋™์ ์ธ ์ƒํ˜ธ์ž‘์šฉ์„ ๋„ฃ๊ณ  ์‹ถ์„ ๋•Œ ์šฐ๋ฆฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜๊ฒŒ ๋œ๋‹ค. ํ•˜์ง€๋งŒ ์›น ๊ฐœ๋ฐœ ์‹œ DOM ๊ด€๋ฆฌ ๋ฐ ์ƒํƒœ๊ฐ’ ๊ด€๋ฆฌ ์ž‘์—…์€ ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์งˆ ์ˆ˜๋ก ๋…ผ๋ฆฌ๊ฐ€ ๋ณต์žกํ•ด์งˆ ์ˆ˜๋ก ๊ท€์ฐฎ๊ณ  ๋จธ๋ฆฌ ์•„ํŒŒ์ง„๋‹ค. ์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์„ ์ตœ์†Œํ™”ํ•˜๊ณ  ์˜ค์ง ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ๊ณผ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI) ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์— ์ง‘์ค‘ํ•˜๊ธฐ ์œ„ํ•ด React ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํƒ„์ƒ๋˜์—ˆ๋‹ค.

๋ฆฌ์•กํŠธ์˜ ํŠน์ง•

๋ฆฌ์•กํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • ๋ทฐ ๋‹ด๋‹น - MVC๋ชจ๋ธ ์ค‘ View๋งŒ ๋‹ด๋‹นํ•œ๋‹ค.
  • ๋“œ๋„“์€ ์ƒํƒœ๊ณ„ - ๊ณผ๊ฑฐ jQuery๊ฐ€ ์œ ํ–‰ํ–ˆ์„ ๋•Œ์— ๋ฒ„๊ธˆ๊ฐˆ๋งŒํผ ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์˜ ๋ฆฌ์•กํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๋‹ค.
  • ๋†’์€ ์ž์œ ๋„ - ํ”„๋ ˆ์ž„์›Œํฌ์ธ Vue.js๋‚˜ Angular์™€ ๋‹ฌ๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ด€๋ฆฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์–‘ํ•œ ํŒจํ‚ค์ง€๋“ค๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. e.g. React Router, Axios, ...
  • ์„ ์–ธ์  - ๋ฆฌ์•กํŠธ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•จ์œผ๋กœ์จ ์‚ฌ์šฉ์ž์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š”ํ•œ UI ์ œ์ž‘์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ - ๋ฆฌ์•กํŠธ๋Š” ๋‹ค์–‘ํ•œ ์บก์Šํ™”๋œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์ด์šฉํ•˜์—ฌ ์ด๋ฅผ ์ž˜ ์กฐํ•ฉํ•˜์—ฌ ๋ณต์žกํ•œ UI๋ฅผ ๋งŒ๋“ค๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.
  • ํ•œ ๋ฒˆ ๋ฐฐ์šฐ๋ฉด, ์–ด๋””์„œ๋Š” ์‚ฌ์šฉ ๊ฐ€๋Šฅ - ๋ฆฌ์•กํŠธ๋Š” Node.js๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„์—์„œ๋„ ๋žœ๋”๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ณ , React-Native๋ฅผ ์ด์šฉํ•ด์„œ ๋ชจ๋ฐ”์ผ ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์˜คํ”ˆ์†Œ์Šค - ํŽ˜์ด์Šค๋ถ์— ์˜ํ•ด ๊ด€๋ฆฌ๋˜๋Š” ์˜คํ”ˆ์†Œ์Šค์ด๋‹ค.
  • ํ”„๋ก ํŠธ์—”๋“œ์˜ ์ง€๋ฐฐ์ž - ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ์— ๋น„ํ•ด ํ˜„์ €ํžˆ ๋†’์€ ๊ตฌ๊ธ€ ํŠธ๋žœ๋“œ ์ง€์ˆ˜์™€ ์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ ์งˆ๋ฌธ์ˆ˜, ๊นƒํ—™ ํ”„๋กœ์ ํŠธ ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

๋ฆฌ์•กํŠธ ๊ด€๋ จ ํŽ˜์ด์ง€

๋ฐ˜์‘ํ˜•