SPA(Single Page Application) : ν κ°μ νμ΄μ§λ‘ μ΄λ£¨μ΄μ§ μ ν리μΌμ΄μ
μ ν΅μ μΈ μΉ λ°©μ(SSR : μλ² μ¬μ΄λ λ λλ§) μ μ¬μ©μκ° λ€λ₯Έ νμ΄μ§λ‘ μ΄λν λλ§λ€ μλ‘μ΄ html μ λ°μμ€κ³ νμ΄μ§λ₯Ό λ‘λ©ν λλ§λ€ μλ²μμ 리μμ€λ₯Ό μ λ¬λ°μ ν΄μν λ€ νλ©΄μ 보μ¬μ£Όλ λ°©μμ΄μλ€. μ¦, μ¬μ©μμκ² λ³΄μ¬μ£Όλ νλ©΄μ μλ²μμ μ€λΉνλ€. μ΄μ²λΌ μ ν΅μ μΈ μΉ λλΆλΆμ μλ² μ¬μ΄λ λ λλ§ λ°©μμ΄λ€. κ·Έλ¬λ μμ¦μλ μΉμμ μ 곡νλ μ λ³΄κ° μ λ§ λ§κΈ° λλ¬Έμ μλ‘μ΄ νλ©΄μ 보μ¬μ€ λλ§λ€ μλ²μμ λͺ¨λ λ·°λ₯Ό μ€λΉνλ€λ©΄ μ±λ₯μμ λ¬Έμ κ° λ°μν μ μλ€. (νΈλν½, μλ²μ λμ λΆν λ±)
κ·Έλμ 리μ‘νΈ κ°μ λΌμ΄λΈλ¬λ¦¬ νΉμ νλ μμν¬λ₯Ό μ¬μ©νμ¬ λ·° λ λλ§μ μ¬μ©μμ λΈλΌμ°μ κ° λ΄λΉνλλ‘ νκ³ μ°μ μ ν리μΌμ΄μ μ λΈλΌμ°μ μ λΆλ¬μμ μ€νμν¨ ν μ¬μ©μμμ μΈν°λμ μ΄ λ°μνλ©΄ νμν λΆλΆλ§ μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νμ¬ μ λ°μ΄νΈ νλ€.
SPA μ κ²½μ° ν΄λΌμ΄μΈνΈ μ¬μ΄λ λ λλ§ (CSR : ν΄λΌμ΄μΈνΈ μ¬μ΄λ λ λλ§) λ°©μμ΄λ€. μλ²μμ μ¬μ©μμκ² μ 곡νλ νμ΄μ§λ ν μ’ λ₯μ΄μ§λ§, ν΄λΉ νμ΄μ§μμ λ‘λ©λ μλ°μ€ν¬λ¦½νΈμ νμ¬ μ¬μ©μ λΈλΌμ°μ μ μ£Όμ μνμ λ°λΌ λ€μν νλ©΄μ 보μ¬μ€ μ μλ€.
λ€λ₯Έ μ£Όμμ λ€λ₯Έ νλ©΄μ 보μ¬μ£Όλ κ²μ λΌμ°ν μ΄λΌκ³ νλ€. 리μ‘νΈ λΌμ°ν λΌμ΄λΈλ¬λ¦¬λ 리μ‘νΈ λΌμ°ν°, λ¦¬μΉ λΌμ°ν°, Next.js λ±μ΄ μλ€. 리μ‘νΈ λΌμ°ν°λ ν΄λΌμ΄μΈνΈ μ¬μ΄λμμ μ΄λ£¨μ΄μ§λ λΌμ°ν μ μμ£Ό κ°λ¨νκ² κ΅¬νν μ μλλ‘ νλ©° λ λμκ° μλ² μ¬μ΄λ λ λλ§μ ν λ λΌμ°ν μ λμμ£Όλ μ»΄ν¬λνΈλ₯Ό μ 곡νλ€.
SPA μ λ¨μ μ μ±μ κ·λͺ¨κ° 컀μ§λ©΄ μλ°μ€ν¬λ¦½νΈ νμΌμ΄ λ무 컀μ§λ€λ κ²μ΄λ€. νμ΄μ§ λ‘λ© μ μ¬μ©μκ° μ€μ λ‘ λ°©λ¬Ένμ§ μμ μλ μλ νμ΄μ§μ μ€ν¬λ¦½νΈλ₯Ό λΆλ¬μ€κΈ° λλ¬Έμ΄λ€.
Link μ»΄ν¬λνΈλ₯Ό μ¬μ©νμ¬ λ€λ₯Έ μ£Όμλ‘ μ΄λνκΈ°
Link μ»΄ν¬λνΈλ ν΄λ¦νλ©΄ λ€λ₯Έ μ£Όμλ‘ μ΄λνλ μ»΄ν¬λνΈμ΄λ€. μΌλ° μΉ μ ν리μΌμ΄μ μμλ a νκ·Έλ₯Ό μ¬μ©νμ¬ νμ΄μ§λ₯Ό μ ννλλ°, 리μ‘νΈ λΌμ°ν°λ₯Ό μ¬μ©ν λλ μ΄ νκ·Έλ₯Ό μ§μ μ¬μ©νλ©΄ μ λλ€. a νκ·Έλ νμ΄μ§λ₯Ό μ ννλ κ³Όμ μμ νμ΄μ§λ₯Ό μλ‘ λΆλ¬μ€κΈ° λλ¬Έμ μ ν리μΌμ΄μ μ΄ λ€κ³ μλ μνλ€μ λͺ¨λ λ λ¦¬κ² λλ€. λ λλ§λ μ»΄ν¬λνΈλ€λ λͺ¨λ μ¬λΌμ§κ³ λ€μ μ²μλΆν° λ λλ§νκ² λλ κ²μ΄λ€.
Link μ»΄ν¬λνΈλ₯Ό μ¬μ©νμ¬ νμ΄μ§λ₯Ό μ ννλ©΄ νμ΄μ§λ₯Ό μλ‘ λΆλ¬μ€μ§ μκ³ μ ν리μΌμ΄μ μ κ·Έλλ‘ μ μ§ν μνμμ HTML5 History API λ₯Ό μ¬μ©νμ¬ νμ΄μ§μ μ£Όμλ§ λ³κ²½νλ€. Link μ»΄ν¬λνΈ μ체λ a νκ·Έλ‘ μ΄λ£¨μ΄μ Έ μμ§λ§ νμ΄μ§ μ νμ λ°©μ§νλ κΈ°λ₯μ΄ λ΄μ₯λμ΄ μλ€.
'JavaScript > React' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[React] ν¨μ μ»΄ν¬λνΈμμ 리λ λλ§ μ΅μ νλ₯Ό μν λ°©λ² (0) | 2021.10.27 |
---|---|
[React] Hooks μ 리 (0) | 2021.10.26 |
[React] μ»΄ν¬λνΈ μμ보기 (0) | 2021.10.26 |
[React] κΈμ°κΈ° κΈ°λ₯ ꡬννκΈ° (0) | 2021.10.22 |
[React] Redux ν΄λ ꡬ쑰 μ 리νκΈ° (0) | 2021.10.21 |
λκΈ