[๊ธฐ์ˆ ๋ฉด์ ‘] ๋ผ์ดํ”„์‚ฌ์ดํด

2023. 9. 14. 13:59ใ†๐Ÿ–ฅ๏ธ CS(Computer Science)/์†Œํ”„ํŠธ์›จ์–ด

๋ผ์ดํ”„์‚ฌ์ดํด(Life Cycle) ์ด๋ž€?

: ์†Œํ”„ํŠธ์›จ์–ด ํ˜น์€ ํ”„๋กœ๊ทธ๋žจ์ด ํŠน์ • ๋‹จ๊ณ„/์ด๋ฒคํŠธ๋ฅผ ๊ฑฐ์ณ ๋™์ž‘ํ•˜๋Š” ๋ฐฉ์‹์„ ์„ค๋ช…ํ•˜๋Š” ๊ฐœ๋…. '์ƒ์„ฑ, ์ดˆ๊ธฐํ™”, ์‹คํ–‰, ์ข…๋ฃŒ' ๋˜๋Š” ๊ณผ์ •
๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ์ค‘์š”ํ•œ ๊ฐœ๋…์œผ๋กœ ์‚ฌ์šฉ๋จ


๋ผ์ดํ”„์‚ฌ์ดํด์˜ ์ฃผ์š” ๋‹จ๊ณ„

  1. ์ƒ์„ฑ(Initialization)
    : ์ปดํฌ๋„ŒํŠธ ํ˜น์€ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ์ดˆ๊ธฐํ™”๋จ. ํ•„์š”ํ•œ ์ž์›์„ ํ• ๋‹นํ•˜๊ณ  ์ดˆ๊ธฐ ์„ค์ •์„ ์ˆ˜ํ–‰
  2. ๋งˆ์šดํŒ…(Mounting)
    : ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์— ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ๊ฐ์ฒด๊ฐ€ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๊ฐ€ ๋จ. ์ปดํฌ๋„ŒํŠธ๋‚˜ ๊ฐ์ฒด๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚จ
  3. ์—…๋ฐ์ดํŠธ(Updating)
    : ์ปดํฌ๋„ŒํŠธ/๊ฐ์ฒด๊ฐ€ ์—…๋ฐ์ดํŠธ ํ˜น์€ ๋ณ€๊ฒฝ ๋จ. ์‚ฌ์šฉ์ž ์ƒํ˜ธ ์ž‘์šฉ ํ˜น์€ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์œผ๋กœ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐ˜์˜ ๋จ.
  4. ์–ธ๋งˆ์šดํŒ…(UnMounting)
    : ์ปดํฌ๋„ŒํŠธ/๊ฐ์ฒด๊ฐ€ DOM์—์„œ ์ œ๊ฑฐ๋˜๊ฑฐ๋‚˜ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๊ฒŒ ๋จ. ์ž์›์„ ํ•ด์ œํ•˜๊ณ  ์ •๋ฆฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•จ.

  • ๋ผ์ดํ”„์‚ฌ์ดํด ์ด๋ฒคํŠธ๋Š” ์ฃผ๋กœ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋‚˜ ๋ฉ”์„œ๋“œ๋กœ ์ œ์–ด๋จ(JS์—์„œ๋Š” React, Angular, Vue...)
  • ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์ดํ•ดํ•˜๊ณ  ๋””๋ฒ„๊ทธ ํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋ฉฐ, ์ž์› ๊ด€๋ฆฌ/์ƒํƒœ ๊ด€๋ฆฌ์— ์ค‘์š”ํ•จ.
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋™์ž‘์„ ๋” ํšจ์œจ์ ์œผ๋กœ ์ œ์–ดํ•˜๊ณ  ์ตœ์ ํ™” ํ•  ์ˆ˜ ์žˆ์Œ