roqkf

[React] SPA ๋ณธ๋ฌธ

๐Ÿ’ป Development/React

[React] SPA

ahyeon7 2022. 11. 30. 01:57

๐Ÿค” 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