๋ฆฌ์กํธ ๋ผ์ฐํฐ v6
Routes
Link
useParams
useSearchParams
useNavigate
react-helmet ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)
๋ฆฌ์กํธ๊ฐ ๋ ๋๋งํ๋ ๋ฐฉ์
๋ฆฌ์กํธ๋ ๊ฐ์ DOM(Virtual DOM)์ ์ฌ์ฉํ์ฌ ๋ ๋๋งํ๋ค. ๊ฐ์ DOM์ ๋ฉ๋ชจ๋ฆฌ์ ์กด์ฌํ๋ ๊ฐ๋ฒผ์ด ๊ฐ์์ DOM ํธ๋ฆฌ๋ก, ์ค์ ๋ก ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง๋๋ DOM๊ณผ ๋์ผํ ๊ตฌ์กฐ๋ฅผ ๊ฐ๋๋ค.
๋ฆฌ์กํธ์์ ์ปดํฌ๋ํธ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ค์ DOM๊ณผ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธํ๋ ๊ฒ์ด ์๋๋ผ, ๊ฐ์ DOM๊ณผ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ๋ฐ์ํ๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ์ ๋ถํ๋ฅผ ์ค์ด๊ณ ๋ ๋๋ง ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์๋ค.
๋ํ, ๋ฆฌ์กํธ๋ SPA(Single Page Application) ๋ฐฉ์์ผ๋ก ์๋ํ๋ค. SPA๋ ํ ๊ฐ์ ํ์ด์ง๋ก ๊ตฌ์ฑ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ฏธํ๋ฉฐ, ์ฌ์ฉ์ ์ธํฐ๋์ ์ด ๋ฐ์ํ ๋๋ง๋ค ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ๋ก๋ถํฐ ๊ฐ์ ธ์์ ๋์ ์ผ๋ก ํ๋ฉด์ ๊ฐฑ์ ํ๋ค. ์ด๋ฅผ ์ํด ๋ฆฌ์กํธ๋ ํด๋ผ์ด์ธํธ ์ธก์์ ๋ผ์ฐํ ์ ์ฒ๋ฆฌํ์ฌ ํ์ํ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ค. ์ด๋ฌํ ๋ฐฉ์์ ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ์ง ์๊ธฐ ๋๋ฌธ์ ๋ ๋น ๋ฅด๊ณ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ค.
์์ฆ, ๋ ์ด ์ถ์์ ๊ทธ๋ฐ์ง ์ฌํ ๊ฐ๊ธฐ์ ๊ฑธ๋ ธ๋ค.๐ญ๐ญ ๊ทธ๋๋ ๋ชฉํํ๋ ํ์ต๋์ ์ฑ์์ ๋ฟ๋ฏํ๋ค! ์ปจ๋์ ์กฐ์ ์ ๋ชปํ ๊ฒ์ด ์ด๋ ค์์ผ๋ก ์์ฉํ๋ค. ๋น ๋ฅด๊ฒ ํ๋ณตํ์