# ์ธ์คํด์ค ๋ผ์ดํ์ฌ์ดํด
์ธ์คํด์ค ๋ผ์ดํ์ฌ์ดํด์ด๋ ๋ทฐ์ ์ธ์คํด์ค๊ฐ ์์ฑ๋์ด ์๋ฉธ๋๊ธฐ๊น์ง ๊ฑฐ์น๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค. ์ธ์คํด์ค๊ฐ ์์ฑ๋๊ณ ๋๋ฉด ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ด๋ถ์ ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ ๊ณผ์ ์ด ์งํ๋ฉ๋๋ค.
- data ์์ฑ์ ์ด๊ธฐํ ๋ฐ ๊ด์ฐฐ (Reactivity ์ฃผ์ )
- ๋ทฐ ํ ํ๋ฆฟ ์ฝ๋ ์ปดํ์ผ (Virtual DOM -> DOM ๋ณํ)
- ์ธ์คํด์ค๋ฅผ DOM์ ๋ถ์ฐฉ
# ๋ผ์ดํ์ฌ์ดํด ๋ค์ด์ด๊ทธ๋จ
์ธ์คํด์ค์ ๋ผ์ดํ์ฌ์ดํด ํ๋ฆ์ ๊ทธ๋ฆผ์ผ๋ก ๋ํ๋ด์ด ๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
# ๋ผ์ดํ์ฌ์ดํด ํ
๋ทฐ์ ๋ผ์ดํ์ฌ์ดํด์ ์ดํดํด์ผ ํ๋ ์ด์ ๋ ๋ฐ๋ก ๋ผ์ดํ์ฌ์ดํด ํ ๋๋ฌธ์ ๋๋ค. ๋ผ์ดํ์ฌ์ดํด ํ ์ผ๋ก ์ธ์คํด์ค์ ํน์ ์์ ์ ์ํ๋ ๋ก์ง์ ๊ตฌํํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์ปดํฌ๋ํธ๊ฐ ์์ฑ๋์๋ง์ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์์ ๋ฐ์์ค๊ณ ์ถ์ผ๋ฉด created๋ beforeMount ๋ผ์ดํ์ฌ์ดํด ํ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ ์ฝ๋๋ ์ธ์คํด์ค๊ฐ ์์ฑ๋์๋ง์ ์ก์์ค์ค๋ก HTTP GET ์์ฒญ์ ๋ณด๋ด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ ์ฝ๋์ ๋๋ค.
# ์์ฃผ ์ฌ์ฉ๋๋ ๋ผ์ดํ์ฌ์ดํด ํ ๋ชฉ๋ก
๊ตฌํํ ๋ ์ฃผ๋ก ์ฌ์ฉํ๋ ๋ผ์ดํ์ฌ์ดํด ํ ์ ์๋์ ๊ฐ์ต๋๋ค.
- created (opens new window)
- beforeMount (opens new window)
- mounted (opens new window)
- destroyed (opens new window)
๋ค๋ฅธ ๋ผ์ดํ์ฌ์ดํด ํ ์ ์๊ณ ์ถ๋ค๋ฉด ์ฌ๊ธฐ (opens new window)๋ฅผ ์ฐธ๊ณ ํ์ธ์.
โ Instance ๐ Template โ