Community

๐ŸŒ React ์ตœ์ดˆ์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ ์„ค๋ฌธ ๊ฒฐ๊ณผ ๐Ÿ“Š

React๊ฐ€ ์ถœ์‹œ๋œ ์ง€๋„ ์–ด๋А๋ง 11๋…„์ด ์ง€๋‚ฌ์Šต๋‹ˆ๋‹ค. ์ด์ œ๋Š” HTML, CSS, JS์ฒ˜๋Ÿผ React๋ฅผ ๋นผ๋†“๊ณ ๋Š” ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋…ผํ•˜๊ธฐ ์–ด๋ ค์›Œ์กŒ๋Š”๋ฐ์š”. ๊ทธ๋ž˜์„œ ์ž‘๋…„์— ์ตœ์ดˆ๋กœ State of React๋ผ๋Š” React์— ํŠนํ™”๋œ ์„ค๋ฌธ ์กฐ์‚ฌ๊ฐ€ ์ „ ์„ธ๊ณ„ ๊ฐœ๋ฐœ์ž๋ฅผ ๋Œ€์ƒ์œผ๋กœ ์‹ค์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋„ ์žฌ๋ฐŒ๊ฒŒ ์„ค๋ฌธ์— ์ฐธ์—ฌํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. React๋Š” 2018๋…„ ๊ฐ€์žฅ ์„ฑ๊ณต์ ์ธ ๋ณ€ํ™”๋กœ ํ‰๊ฐ€๋ฐ›๊ณ  ์žˆ๋Š” Hooks์— ์ด์–ด์„œ ์ตœ๊ทผ์— Server Components๋ผ๋Š” ํ™”๋‘๋ฅผ ์‹œ์žฅ์— ๋˜์กŒ๋Š”๋ฐ์š”. ์„ค๋ฌธ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์‹œ๋ฉด Server Components์— ๋Œ€ํ•œ ํ˜ธ๋ถˆํ˜ธ๊ฐ€ ๊ต‰์žฅํžˆ ๊ฐˆ๋ฆฌ๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ํŒจ๋Ÿฌ๋‹ค์ž„์— ๋Œ€ํ•œ ๊ธฐ๋Œ€๊ฐ๊ณผ ํ”ผ๋กœ๊ฐ์ด ๊ณต์กดํ•˜๋Š” ์–‘์ƒ์ž…๋‹ˆ๋‹ค. ์•„๋ฌด๋ž˜๋„ React๊ฐ€ ์ฒ˜์Œ ๋“ฑ์žฅํ–ˆ์„ ๋•Œ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์—ด๊ด‘ํ–ˆ๋˜ ๊ฐ€์žฅ ํฐ ์ด์œ ๊ฐ€ ํด๋ผ์ด์–ธํŠธ ๋‹จ ๋žœ๋”๋ง ํ†ตํ•ด์„œ SPA ๊ฐœ๋ฐœ์„ ํ•˜๊ธฐ ์‰ฝ๋‹ค๋Š” ๊ฒƒ์ด์˜€๋Š”๋ฐ, Server Components๋Š” ์ด ๊ฒƒ๊ณผ ๋‹ค์†Œ ์ƒ์ถฉํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ ๊ฑฐ๋ถ€๊ฐ์ด ์ข€ ์žˆ๋Š” ๊ฒŒ ์•„๋‹Œ๊ฐ€ ์‹ถ์Šต๋‹ˆ๋‹ค. Server Components๋กœ ์ธํ•ด์„œ React์˜ ์ฆ๊ฐ€ํ•˜๋Š” ๋ณต์žก๋„๋„ ๊ทธ๋ ‡๊ณ , ๋”์šฑ ๋” ๊ฐ€ํŒŒ๋ผ์ง€๋Š” ํ•™์Šต ๊ณก์„ ๋„ ๋ฆฌํ…์…˜ ์ธก๋ฉด์—์„œ ๋ฌด์‹œํ•  ์ˆ˜ ์—†์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ ์—ฌ๋Ÿฌ ๋Œ€์•ˆ ๊ธฐ์ˆ ์˜ ๋„์ „์— ์ง๋ฉดํ•˜๊ณ  ์žˆ๋Š” React๊ฐ€ Server Components๋ฅผ ํ†ตํ•ด์„œ ํ•œ ๋‹จ๊ณ„ ๋” ๋„์•ฝํ•  ์ˆ˜ ์žˆ์„์ง€ ์•„๋‹ˆ๋ฉด ์˜คํžˆ๋ ค ์‹œ์žฅ ์ฃผ๋„๊ถŒ์„ ์žƒ๊ฒŒ ๋˜๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋ ์ง€ ์•ž์œผ๋กœ ์ง€์ผœ๋ณด๋ฉด ํฅ๋ฏธ๋กœ์šธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๐Ÿ“Š ์„ค๋ฌธ ๊ฒฐ๊ณผ: https://2023.stateofreact.com/ko-KR/

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค