[React] SPA(Single Page Application) ์ด๋ž€?
ยท
Frontend/React
SPA๋ฅผ ์„ค๋ช…ํ•˜๊ธฐ ์ „ SPA๋ฅผ ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€? ์ „ํ†ต์ ์ธ ์›น ์‚ฌ์ดํŠธ๋Š” ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•  ๋•Œ๋งˆ๋‹ค ์ •์  ๋ฆฌ์†Œ์Šค๊ฐ€ ๋‹ค์šด๋กœ๋“œ๋˜๊ณ  ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋ง ํ•˜๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ์ƒˆ๋กœ๊ณ ์นจ์ด ๋ฐœ์ƒ๋˜์–ด ์‚ฌ์šฉ์„ฑ์ด ์ข‹์ง€ ์•Š์œผ๋ฉฐ, ๋ณ€๊ฒฝ์ด ํ•„์š”์—†๋Š” ๋ถ€๋ถ„์„ ํฌํ•จํ•˜์—ฌ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๊ฐฑ์‹ ํ•˜๋ฏ€๋กœ ๊ต‰์žฅํžˆ ๋น„ํšจ์œจ์ ์ด๋‹ค. ์›น ์‚ฌ์ดํŠธ์˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ์„œ๋ฒ„์ชฝ์—์„  ๊ณผ๋ถ€ํ•˜๊ฐ€ ๊ฑธ๋ฆด ์ˆ˜ ๋ฐ–์— ์—†๋‹ค. ๊ทธ ๋งŒํผ ์†๋„์ ์ธ ์ธก๋ฉด์—์„œ ์‚ฌ์šฉ์ž๋Š” ๋ถˆํŽธํ•จ์„ ๊ทธ๋Œ€๋กœ ๋Š๋ผ๊ฒŒ ๋œ๋‹ค. ํ‹€๋ฆดํ™•๋ฅ ์ด ๋†’์€ ๊ฐœ์ธ์ ์ธ ์ง€์‹(์ˆ˜์ • ๊ฐ€๋Šฅ์„ฑ ๋†’์Œโ—) Traditional Page Lifecycle HTML → CSS → DOM → Web browser SPA Lifecycle HTML → CSS → Virtual Dom → DOM(ํ•„์š” ์š”์†Œ๋งŒ ๋ณ€๊ฒฝ) → Web browser..
_์„ฑํ˜ธ_
'Single Page Application' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก