# ์ธ์Šคํ„ด์Šค ๋ผ์ดํ”„์‚ฌ์ดํด

์ธ์Šคํ„ด์Šค ๋ผ์ดํ”„์‚ฌ์ดํด์ด๋ž€ ๋ทฐ์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜์–ด ์†Œ๋ฉธ๋˜๊ธฐ๊นŒ์ง€ ๊ฑฐ์น˜๋Š” ๊ณผ์ •์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋‚˜๋ฉด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚ด๋ถ€์ ์œผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

  • data ์†์„ฑ์˜ ์ดˆ๊ธฐํ™” ๋ฐ ๊ด€์ฐฐ (Reactivity ์ฃผ์ž…)
  • ๋ทฐ ํ…œํ”Œ๋ฆฟ ์ฝ”๋“œ ์ปดํŒŒ์ผ (Virtual DOM -> DOM ๋ณ€ํ™˜)
  • ์ธ์Šคํ„ด์Šค๋ฅผ DOM์— ๋ถ€์ฐฉ

# ๋ผ์ดํ”„์‚ฌ์ดํด ๋‹ค์ด์–ด๊ทธ๋žจ

์ธ์Šคํ„ด์Šค์˜ ๋ผ์ดํ”„์‚ฌ์ดํด ํ๋ฆ„์„ ๊ทธ๋ฆผ์œผ๋กœ ๋‚˜ํƒ€๋‚ด์–ด ๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ฝ˜์†”์—์„œ ํ™•์ธํ•œ ์ธ์Šคํ„ด์Šค ๋‚ด์šฉ

# ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…

๋ทฐ์˜ ๋ผ์ดํ”„์‚ฌ์ดํด์„ ์ดํ•ดํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๋Š” ๋ฐ”๋กœ ๋ผ์ดํ”„์‚ฌ์ดํด ํ›… ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…์œผ๋กœ ์ธ์Šคํ„ด์Šค์˜ ํŠน์ • ์‹œ์ ์— ์›ํ•˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ๋˜์ž๋งˆ์ž ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜ค๊ณ  ์‹ถ์œผ๋ฉด created๋‚˜ beforeMount ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์ฝ”๋“œ๋Š” ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜์ž๋งˆ์ž ์•ก์‹œ์˜ค์Šค๋กœ HTTP GET ์š”์ฒญ์„ ๋ณด๋‚ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

# ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ผ์ดํ”„์‚ฌ์ดํด ํ›… ๋ชฉ๋ก

๊ตฌํ˜„ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ์—ฌ๊ธฐ (opens new window)๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.