์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- css animation
- React
- props drilling
- Lifting state
- ๊ณ ์ฐจํจ์
- ์ปดํจํฐ ๊ณตํ
- State
- prototype
- ์ ์ด์ฝฅ ๋์จ
- fetch api
- html
- Study
- git
- BFS์ DFS
- css
- wai-aria
- JavaScript
- Effect Hook
- ํ๋ก๊ทธ๋๋จธ์ค
- jsx
- ์๋งจํฑ์์
- ํ ์คํธ ์์
- ๋ฒ๋ค๋ง
- WEB
- ๋ฒ์ง ๋ชจํ
- ์คํ ์ด์ธ ์ฝ๋42๊ธฐ
- Cmarket
- ํผํฐ ๋ชจ๋น์ ๋ฒ์ง ๋ชจํ
- ํผํฐ ๋ชจ๋น
- ์คํ ์ด์ธ ์ฝ๋
- Today
- Total
roqkf
[React] SPA ๋ณธ๋ฌธ

๐ค SPA๋?
1. ๋ฑ์ฅ๋ฐฐ๊ฒฝ
์ ํต์ ์ธ ์น์ฌ์ดํธ์์๋ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ ๋ด์ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ๋ฉด, ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด์ ๋งค๋ฒ HTML ํ์ผ๋ก ๋ ํ์ด์ง์ ์ ์ฒด๋ฅผ ๋ถ๋ฌ์์ผ๋ง ํ๋ค.

์์ ๊ฐ์ ์์ ๊ทธ๋ฆผ์ฒ๋ผ ๋์ผํ ํ์ด์ง ์ ํ์ ๋ณด์ฌ์ฃผ๊ณ ์๋ค. ์ ํต์ ์ธ ์น์ฌ์ดํธ๋ ํ์ด์ง ์ ์ฒด๋ฅผ ๋ก๋ฉํ๊ณ , SPA๋ Menu, Footer์ ๊ฐ์ ํ์ด์ง ์ ํ ์ ํ์ ์ค๋ณต๋๋ ๋ถ๋ถ์ ์๋ก ๋ถ๋ฌ์ค์ง ์๋๋ค. ์ ํต์ ์ธ ์น์ฌ์ดํธ์์ ์ด์ ๊ฐ์ด ํ์ด์ง ์ ์ฒด๋ฅผ ๋ถ๋ฌ์ค๋ ํ์๋ฅผ ๋ณดํต ๊น๋นก์ธ๋ค๊ณ ํํํ๋ค.

์น์ฌ์ดํธ๊ฐ ๋ณต์กํด์ง๊ณ ์ ํ๋ฆฌ์ผ์ด์
ํํ๋ฅผ ๊ฐ์ง๊ฒ ๋๋ฉด์, ์ฌ์ฉ์์ ์๋น์ค ์ฌ์ด์ ๋์ฑ ๋ง์ ์ํธ์์ฉ์ด ์ผ์ด๋๊ฒ ๋์๋ค. ํ์ง๋ง ์ด๋ด ๋๋ง๋ค Header๋ Navigation Bar์ ๊ฐ์ด ์ค๋ณต๋๋ ์์๋ค์ ๋งค๋ฒ ๋ถ๋ฌ์ค๋ ๊ฒ์ ์๋ฒ์์ ๋ถํ์ํ ํธ๋ํฝ์ ๋ฐ์์์ผฐ๋ค. ๋ํ ์ฌ์ฉ์ ์
์ฅ์์๋ ๋งค๋ฒ ๋ชจ๋ ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค๊ฒ ๋๋ฉด์ ๋ ๋๋ฆฐ ๋ฐ์์ฑ์ ๊ฐ์ง๊ฒ ๋์๊ณ , ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ๊ฐ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค์๋ค.
๐น 1990๋
๋ ํ๋ฐ์ HTML ๋ฌธ์ ์ ์ฒด๊ฐ ์๋, ์
๋ฐ์ดํธ์ ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ์์ ์ ๋ฌ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ JS๊ฐ ๋์ ์ผ๋ก HTML ์์๋ฅผ ์์ฑํด์ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ์์ด ๊ฐ๋ฐ๋ผ ์ฌ์ฉ๋๊ธฐ ์์ํ๋ค.

๐น 2000๋ ๋ ์ค๋ฐ๋ถํฐ ์ด๋ฌํ ๊ฐ๋ฐ ๋ฐฉ์์ ์ด์ฉํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ณดํธํ๋์์ผ๋ฉฐ, ์ด๊ฒ์ Single Page Application(SPA)์ด๋ค.
2. ๊ฐ๋

์๋ฒ๋ก๋ถํฐ ์์ ํ ์๋ก์ด ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค์ง ์๊ณ ํ์ด์ง ๊ฐฑ์ ์ ํ์ํ ๋ฐ์ดํฐ๋ง ๋ฐ์, ๊ทธ ์ ๋ณด๋ฅผ ๊ธฐ์ค์ผ๋ก ํ์ฌ์ ํ์ด์ง๋ฅผ ์ ๋ฐ์ดํธํจ์ผ๋ก์จ ์ฌ์ฉ์์ ์ํตํ๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ด๋ ์น ์ฌ์ดํธ
3. SPA์ ์ฅ์

์ฐ๋ฆฌ๊ฐ ๋ง์ด ์ฌ์ฉํ๋ SNS๋ก ์๋ฅผ ๋ค์๋ฉด, ์น๊ตฌ๊ฐ ์ฌ๋ฆฐ ์ฌ์ง์ ์ข์์๋ฅผ ๋๋ฅด๊ณ ๋๊ธ์ ๋ฌ๊ณ , ๊ถ๊ธํ ๋ ๊ฒ์์ ํ๊ธฐ๋ ํ๋ค. ์ด๋ด ๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ฌ์ฉ์ ์ฌ์ด์์๋ ์์๋ก ์ํธ์์ฉ์ด ๋ฐ์ํ๋๋ฐ ์ด๋ ํ์ด์ง ์ ์ฒด๋ฅผ ๋ ๋๋งํ๋ ๊ฒ์ด ์๋ ํ์ํ ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์ ํ๋์ ๋น ๋ฅธ ๋ฐ์์ ๋ณด์ธ๋ค. ์๋ฒ ์ ์ฅ์์๋ ์์ฒญ๋ฐ์ ๋ฐ์ดํฐ๋ง ๋๊ฒจ์ฃผ๋ฉด ๋๋ฏ๋ก ๊ณผ๊ฑฐ์ ๊ฐ์ ๊ณผ๋ถํ ๋ฌธ์ ๋ ์ค์ผ ์ ์์๋ค. ๋ํ ํ๋ฉด ์ ์ฒด๋ฅผ ์๋ก ๋ ๋๋งํ ํ์๊ฐ ์์ด ๋ณด๋ค ๋์ UX๋ฅผ ์ ๊ณตํ๋ค.
4. SPA์ ๋จ์

๐จ JavaScript ํ์ผ ํฌ๊ธฐ๊ฐ ํฌ๊ณ , ์ฒซ ํ๋ฉด ๋ก๋ฉ ์๊ฐ์ด ๊ธธ์ด์ง๋ค.
SPA์ ๊ฒฝ์ฐ์๋ JavaScript ํ์ผ์ ํฌ๊ธฐ๊ฐ ํฌ๊ธฐ ๋๋ฌธ์ JS ํ์ผ์ ๊ธฐ๋ค๋ฆฌ๋ ์๊ฐ์ผ๋ก ์ฒซ ํ๋ฉด ๋ก๋ฉ ์๊ฐ์ด ๊ธธ์ด์ง๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ฒซ ํ๋ฉด์ ๋ก๋ฉํ ๋ HTML ํ์ผ์ ์ฝ์ ํ ๊ทธ ์์ ์๋ script ์์ Javascript ํ์ผ์ ๋ค์ ๋ฐ์์ค๋ ๊ณผ์ ์ ๊ฑฐ์น๊ธฐ ๋๋ฌธ์ด๋ค.

์ฒซ ํ๋ฉด ๋ก๋ฉ์ ํ ๋ ์ฝ์ HTML ํ์ผ์ ๊ฑฐ์ ๋น์ด์๊ณ , ๋๋ถ๋ถ์ ๋ชจ๋ ์ฝ๋๋ค์ด JavaScript ํ์ผ ์์ ๋ค์ด์๋ค ๋ณด๋ ์์ฐ์ค๋ฝ๊ฒ JavaScript ํ์ผ์ด ๋ฌด๊ฑฐ์์ง๋ฉฐ, ์ด JS ํ์ผ์ ๊ธฐ๋ค๋ฆฌ๋ ์๊ฐ์ผ๋ก ์ธํด์ ์ฒซ ํ๋ฉด ๋ก๋ฉ ์๊ฐ์ด ๊ธธ์ด์ง๋ค.

๐จ ๊ฒ์ ์์ง ์ต์ ํ(SEO)๊ฐ ์ข์ง ์๋ค
๊ฒ์์์ง ์ต์ ํ๋ ๊ตฌ๊ธ์ด๋ ๋ค์ด๋ฒ ๊ฐ์ ๊ฒ์์์ง์ด ์๋ฃ๋ฅผ ์์งํ๊ธฐ ์ข๋๋ก ์นํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ ๊ฒ์ ๋ปํ๋ค. ๊ฒ์ ์์ง์ ์๋ ๋ฐฉ์์ ๊ฒ์ ๋ก๋ด์ด ์นํ์ด์ง์ ์๋ ์ ๋ณด๋ฅผ ์์งํ๊ณ ๋ถ์ํด์ ๊ทธ ๊ฒฐ๊ณผ๊ฐ์ ์ธ๋ฑ์ค๋ฅผ ๋ง๋ค์ด์ ๋ณด๊ดํ๊ณ ์๋ค๊ฐ ์ฌ์ฉ์๊ฐ ๊ฒ์์ด๋ฅผ ์
๋ ฅํ๋ฉด ๋ณด๊ดํ๋ ์ธ๋ฑ์ค์์ ๊ฒ์์ด์ ๊ฐ์ฅ ์ฐ๊ด์ฑ ๋์ ์น ํ์ด์ง๋ค์ ์์๋๋ก ๋ณด์ฌ์ฃผ๋ ๋ฐฉ์์ผ๋ก ์๋๋๋ค. ํ์ง๋ง SPA์ ๊ฒฝ์ฐ์๋ HTML ํ์ผ์ ๋ณ๋ค๋ฅธ ์๋ฃ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๊ฒ์ ์์ง์ด ์ ์ ํ๊ฒ ๋์ํ์ง ๋ชปํ๋ค. ๊ฒ์ ๋ก๋ด์ด ์๋ฃ๋ฅผ ์์งํ ๋ ์น ํ์ด์ง์ URL, HTML์ ๋ฌธ์ ๋ด์ ๊ฐ์ข
ํ๊ทธ, ๋งํฌ ๋ฑ์ ๋ถ์ํ๋๋ฐ SPA๋ HTML์ด ๊ฑฐ์ ๋น์ด์์ด ๊ฒ์ ๋ก๋ด์ด ์๋ฃ๋ฅผ ์ถฉ๋ถํ ์์งํ์ง ๋ชปํ๊ฒ ๋๋ ๊ฒ์ด๋ค. ์ด๋ฌํ ์ด์ ๋๋ฌธ์ ๊ฒ์ ๋
ธ์ถ์ด ์ค์ํ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฒ์ ์์ง ์ต์ ํ์ ๋ํ ๋์์ฑ
์ ๋ฐ๋ก ๋ง๋ จํด์ผ ํ๋ฉฐ, ์ฑ ์์์ ์/๋ค๋ก ๊ฐ๊ธฐ ๋ฑ์ ์ํ ๊ด๋ฆฌ๋ ํด์ผ ๋๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ์ ๋ณต์ก๋๊ฐ ๋ ๋์ด๋๋ค. ํ์ง๋ง SPA์์๋ ๊ฒ์ ์์ง ์ต์ ํ์ ๋์ํ ์ ์๋๋ก ๊ฒ์ ์์ง์ด ๋ฐ์ ํ๊ณ ์๋ ์ถ์ธ์ด๋ค.
์ถ์ฒ: ์ฝ๋์คํ ์ด์ธ
'๐ป Development > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] React์์์ State ์ด๋ฒคํธ ์ฒ๋ฆฌ (1) | 2022.11.30 |
---|---|
[React] React State & Props (0) | 2022.11.30 |
[React] React Router (0) | 2022.11.30 |
[React] key JSX ์์ฑ์ด ํ์ํ ์ด์ (0) | 2022.11.27 |
[React] React & JSX (0) | 2022.11.27 |