Svelte vs React
ย - Last update: 2023-05-15

Svelte๊ฐ€ ๋ญ”๋ฐ?

Svelte๋Š” HTML ์ž‘์„ฑ๊ตฌ์กฐ์™€ ๊ฑฐ์˜ ์œ ์‚ฌํ•œ ํ˜•ํƒœ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” React์™€ ์œ ์‚ฌํ•œ FE Framework(ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋งž๋Š”์ง€์— ๋Œ€ํ•œ ๋…ผ์Ÿ์€ ์ผ๋‹จ ๋„˜์–ด๊ฐ€์ž)์ด๋‹ค. ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ React ์ฒ˜๋Ÿผ state์™€ props ์‚ฌ์šฉ์ด ์ธ์œ„์ ์ด์ง€ ์•Š๊ณ , ์ง๊ด€์ ์ด๋ฉฐ ์ปดํฌ๋„ŒํŠธ ๋žœ๋”๋ง ์—…๋ฐ์ดํŠธ๊ฐ€ ์ž๋™์ ์œผ๋กœ ๋œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. (๊ฐ€๋ น useState๋ฅผ ์“ฐ์ง€ ์•Š๋”๋ผ๋„)

๊ฐœ์ธ์ ์œผ๋กœ Svelte ๋ฅผ ์ฐธ ์ข‹์•„ํ•œ๋‹ค. ์ง๊ด€์ ์ด๋ฉฐ, JSX๋ผ๋Š” ํฌ๋Œ€์˜ ๋น„ํ‘œ์ค€(๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๊ธฐ์— ๊ทธ๋ ‡๋‹ค)์„ ์“ฐ์ง€ ์•Š์„ ์ˆ˜ ์žˆ๊ธฐ์— ๊ทธ๋ ‡๋‹ค.

Svelte ์ž์ฒด๊ฐ€ ์ฐธ ์ž˜ ๋งŒ๋“ค์–ด์ง„ ์–ธ์–ด์ด๊ณ  ์‚ฌ์šฉ์—๋„ ๋ถˆํŽธํ•จ์ด ์ „ํ˜€ ์—†๊ณ , ์‹ค์ œ ๋‚˜์˜ Toy Project์—๋„ ๋‹ค์ˆ˜ ํ™œ์šฉํ–ˆ๋‹ค. ๋‹ค๋งŒ, ์น˜๋ช…์ ์ธ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š”๋ฐ ๋ฐ”๋กœ ์ƒํƒœ๊ณ„์ด๋‹ค. ์ƒํƒœ๊ณ„๊ฐ€ ๊ฐ–์ถ”์–ด์ง€์ง€ ์•Š์€ ์ƒํƒœ์—์„œ๋Š” ์•„๋ฌด๋ฆฌ ์ข‹์•„๋„ ์˜๋ฏธ๊ฐ€ ์—†๋‹ค. 2023๋…„์ด๋‹ค. Component ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ์ด ์ผ์ƒํ™” ๋˜์–ด ์žˆ๊ณ , ๋ชจ๋“  ๊ฒƒ์„ ํ˜ผ์ž ๋งŒ๋“ค ์ˆ˜ ์—†๋Š” ์„ธ์ƒ์ด๋‹ค. ์ด ์ ์ด ๋‚˜๋Š” ๋„ˆ๋ฌด ์•„์‰ฝ๋‹ค.

๋งŒ์•ฝ Svelte๊ฐ€ React๊ฐ€ ๋‚˜์˜จ ํ•œ์ฐธ ์ดํ›„ ๋‚˜์˜ค์ง€ ์•Š๊ณ  ํ•œ 1~2๋…„ ๊ฒฉ์ฐจ๋ฅผ ๋‘์—ˆ์„ ๋•Œ ๋‚˜์™”์—ˆ๋‹ค๋ฉด vue ์ฒ˜๋Ÿผ 2์ธ์ž ์—ญํ• ์„ ํ•  ์ˆ˜๋„ ์žˆ์—ˆ์„ ๊ฒƒ์ด๋‹ค. ๋ฌผ๋ก  ์š”์ฆ˜์€ ์œ ๋ช…ํ•œ ํ”„๋กœ์ ํŠธ๋“ค์€ Svelte๋„ ๋ณ‘๋ ฌ๋กœ ์ง€์›ํ•˜๋Š” ๊ฒฝ์šฐ๋“ค์ด ๋งŽ์ด ๋ณด์ด์ง€๋งŒ, 99๊ฐœ๊ฐ€ Svelte๋ฅผ ์ง€์›ํ•œ๋‹ค ํ•˜๋”๋ผ๋„ ๊ฒฐ๊ตญ 1๊ฐœ๊ฐ€ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ๋งค์šฐ ๊ท€์ฐฎ์Œ์ด ๋”ฐ๋ฅด๊ฒŒ ๋œ๋‹ค.

๊ณ ์งˆ์ ์ธ ๋ฌธ์ œ์ธ ๋ถ€์กฑํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ํ•ด๊ฒฐ์ฑ…?

์—†๋‹ค. ์ด๊ฒŒ ๋ฌธ์ œ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ์†Œํ•œ ๋ฌธ์ œ์ ๋“ค์ด์•ผ ์–ด๋–ป๊ฒŒ๋“  ๊ณ ์ณ๋‚˜๊ฐ€๊ฑฐ๋‚˜ ํ•˜๋ฉด ๋˜๋Š” ๋ฌธ์ œ์ธ๋ฐ, ์ด๊ฑด ํ•ด๊ฒฐ์ฑ…์ด ์•„์˜ˆ ์—†๋Š” ์ˆ˜์ค€์ด๋‹ค. ๊พธ์ค€ํžˆ ๊ฐœ๋ฐœ์ด ๋˜์–ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๋ฏธ ๊ธฐ์—…๋“ค ์ž…์žฅ์—์„œ๋„ React ์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์ž…์žฅ์—์„œ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ ๋˜ ๊ฐœ๋ฐœํ•˜๊ฒŒ ํ•  ์œ ์ธ์ฑ…์ด ์—†๋‹ค. ๋ฌผ๋ก  React ์ปดํฌ๋„ŒํŠธ๋“ค์„ Svelte์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ์‹์„ ์ทจํ•˜๋Š” ๋ฐฉ์‹์˜ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทผ๋ฐ ๊ทธ๋Ÿผ React ์“ฐ๋ฉด ๋˜์ง€ ์™œ Svelte ์“ฐ๊ฒ ๋Š”๊ฐ€.

Sveltekit?

๋‚˜๋Š” ์ด๊ฒŒ ์ •๋ง ๋ณ„๋กœ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. Svelte์˜ ํ•ต์‹ฌ์€ ๊ฐ„๋‹จํ•จ์— ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ํ”„๋กœ์ ํŠธ๋Š” ๋„ˆ๋ฌด ๋ณต์žกํ•˜๋‹ค. ์‹ค์ œ๋กœ Svelte ๊ฐœ๋ฐœ์„ ์ฃผ๋„ํ•˜๋˜ ๊ฐœ๋ฐœ์ž๋„ ์ด Sveltekit์˜ ์ฒซ๋ฒˆ์งธ ์ •์‹๋ฒ„์ „์„ ๋‚ด๋†“๊ธฐ๊นŒ์ง€ ์ƒ๋‹นํ•œ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋‹ค. (์‹ค๋ ฅ์žˆ๋Š” ๊ฐœ๋ฐœ์ž์ž„์—๋„) ๊ทธ๋ฆฌ๊ณ  Svelte ๋ฆด๋ฆฌ์ฆˆ ์‹œ์ ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ด๋ฏธ SSR ์ƒํƒœ๊ณ„์— ์ด๋ฏธ ๊ฐ•์ž๋“ค์ด ๋‹ค์ˆ˜ ์กด์žฌํ•œ๋‹ค. ์ด๋“ค ์‚ฌ์ด์— Svelte๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ด์œ ๋งŒ์œผ๋กœ Sveltekit์„ ์‚ฌ์šฉํ•˜๊ฒŒ ํ•˜๊ธฐ์—๋Š” ๋„ˆ๋ฌด ๋ฉ”๋ฆฌํŠธ๊ฐ€ ์ ๋‹ค.

๊ทธ๋ž˜์„œ ์ƒˆ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค ๋•Œ๋Š” ๋‚ด๊ฐ€ ์‚ฌ๋ž‘ํ•˜๋˜ Svelte๋ฅผ ๋ฒ„๋ฆฌ๊ณ  React ๊ธฐ๋ฐ˜์˜ vite๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๋งˆ์Œ๋จน์—ˆ๋‹ค. 2023๋…„์—์„œ๋Š” ์ด๊ฒŒ ์ œ์ผ ์“ฐ๊ธฐ ์‰ฝ๊ณ , ์ƒํƒœ๊ณ„๋„ ํฌ๋‹ˆ๊นŒ. ๋ช‡๋…„๊ฐ„ ์ง€์ผœ๋ณด๋ฉฐ ์‚ฌ์šฉํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ์ธ Svelte์ธ๋ฐ, ๋ช‡๋…„์งธ ์ด๋Ÿฐ ์ปดํฌ๋„ŒํŠธ ๋ถ€์กฑ ๋ฌธ์ œ๋“ค์ด ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•„์„œ ๋‚˜๋Š” ๋”์ด์ƒ ์“ฐ์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™๋‹ค.

๊ทธ๋ž˜๋„ ์ •๋“ค์—ˆ๋˜ ํ”„๋กœ์ ํŠธ์—ฌ์„œ ํ•œ๋•Œ๋Š” ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค์–ด์„œ ๊ณต๊ฐœ๋„ ํ•˜๊ณ  ํ–ˆ๋Š”๋ฐ ์ด๊ฒŒ ๋ญ ํ•œ๋‘์‚ฌ๋žŒ ๋” ๋‹ฌ๋ผ๋ถ™๋Š”๋‹ค๊ณ  ํ•ด๊ฒฐ๋œ ๋ฌธ์ œ๋Š” ์•„๋‹ˆ๋ผ์„œ..

๐Ÿท๏ธ ์ฃผ์ œ ๋ชฉ๋ก: