[React] React SPA

fejiguΒ·2022λ…„ 8μ›” 1일
1

React

λͺ©λ‘ 보기
3/16


πŸ”Ž μƒˆλ‘­κ²Œ ν•™μŠ΅ν•œ React SPA, 이전 ν•™μŠ΅λ“€μ— λΉ„ν•΄ 어렡지 μ•Šμ€ κ°œλ…μ΄μ—ˆμ§€λ§Œ React SPA κ°œμš”, React SPA κ°œλ…, μž₯단점에 λŒ€ν•΄ κ°„λ‹¨ν•˜κ²Œ μ •λ¦¬ν•˜λ©° λ³΅μŠ΅ν•˜κ³ μž ν•œλ‹€.



βœ”οΈ React SPA λ“±μž₯ λ°°κ²½

β†’ μ›ΉνŽ˜μ΄μ§€μ—μ„œλŠ” νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•  λ•Œλ§ˆλ‹€ μ„œλ²„μ— 미리 μ€€λΉ„λ˜μ–΄ μžˆλŠ” νŽ˜μ΄μ§€λ₯Ό 전달 λ°›μ•„μ™€μ„œ λ Œλ”λ§μ„ ν–ˆλ‹€. ν•˜μ§€λ§Œ, 규λͺ¨κ°€ 컀질수둝 μ‚¬μš©μžμ™€μ˜ μƒν˜Έ μž‘μš©μ΄ λ§Žμ•„μ§€κ³  속도 μ €ν•˜ λ“±μ˜ λ¬Έμ œκ°€ λ°œμƒν•˜κ²Œ λœλ‹€.

κ·Έλž˜μ„œ HTML λ¬Έμ„œ 전체가 μ•„λ‹Œ, μ—…λ°μ΄νŠΈμ— ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μ„œλ²„μ—μ„œ 전달받아 이 데이터λ₯Ό JavaScriptκ°€ λ™μ μœΌλ‘œ HTML μš”μ†Œλ₯Ό μƒμ„±ν•΄μ„œ 화면에 λ³΄μ—¬μ£ΌλŠ” 방식이 κ°œλ°œλ˜μ–΄ μ‚¬μš©λ˜κΈ° μ‹œμž‘ν•˜μ˜€λ‹€. 이것이 μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ SPA의 λ“±μž₯이닀.




βœ”οΈβœ”οΈ SPA(Single-Page Application) κ°œλ…

β†’ SPAλŠ” μ„œλ²„λ‘œλΆ€ν„° μ™„μ „νžˆ μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό λΆˆλŸ¬μ˜€λŠ” 것이 μ•„λ‹ˆλΌ,

화면을 μ—…λ°μ΄νŠΈν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μ„œλ²„μ—μ„œ 전달받아
λΈŒλΌμš°μ €μ—μ„œ ν•΄λ‹Ήν•˜λŠ” λΆ€λΆ„λ§Œ μ—…λ°μ΄νŠΈν•˜λŠ” λ°©μ‹μœΌλ‘œ
μž‘λ™ν•˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄λ‚˜ μ›Ή μ‚¬μ΄νŠΈλ₯Ό λ§ν•œλ‹€.



βœ”οΈβœ”οΈβœ”οΈ SPA의 μž₯단점

1) μ‚¬μš©μžμ™€μ˜ μΈν„°νŽ˜μ΄μŠ€μ— λΉ λ₯΄κ²Œ λ°˜μ‘ν•œλ‹€
2) μ„œλ²„ κ³ΌλΆ€ν™” λ¬Έμ œκ°€ ν˜„μ €ν•˜κ²Œ 쀄어든닀
3) 더 λ‚˜μ€ μœ μ € κ²½ν—˜μ„ μ œκ³΅ν•œλ‹€


πŸ”Ž SPA λ°©μ‹μœΌλ‘œ μ œμž‘λœ μ„œλΉ„μŠ€λ“€ : Youtube,facebook, Gmail, airbnb, Netflix λ“±
πŸ”Ž κ°€μž₯ 큰 μž₯점 : μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•΄μ„œ μ›Ή λ¬Έμ„œμ— μ—¬λŸ¬ interaction을 λΆ€μ—¬ν•œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ ν˜•νƒœλ‘œ μ‚¬μš©ν•  수 μžˆλ‹€λŠ” 점(λŒ€λΆ€λΆ„μ˜ λ™μž‘μ€ μžλ°”μŠ€νŠΈλ¦½νŠΈμ— μ˜μ‘΄ν•˜μ—¬ μž‘λ™)

1) JavaScript 파일 크기가 μ»€μ„œ, 첫 ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ΄ κΈΈλ‹€
2) HTML νŒŒμΌμ— 별닀λ₯Έ μžλ£Œκ°€ μ—†μ–΄, 검색 엔진 μ΅œμ ν™”κ°€ 쒋지 μ•Šλ‹€

profile
μ‹ κ·œ μ„œλΉ„μŠ€μ˜ κΈ°νšλΆ€ν„° 개발, μš΄μ˜κΉŒμ§€ μ „ 과정을 κ²½ν—˜ν•œ μ£Όλ‹ˆμ–΄ πŸ“±

0개의 λŒ“κΈ€