## ๐Ÿ“Œ Brief Summary React๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ƒํƒœ(State)์™€ ์†์„ฑ(Props)์˜ ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋กœ ํ‘œํ˜„ํ•˜์—ฌ ์˜ˆ์ธก ๊ฐ€๋Šฅ์„ฑ๊ณผ ํ…Œ์ŠคํŠธ ์šฉ์ด์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๋Š” ์„ ์–ธํ˜•(Declarative) UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜์™€ ํ›…(Hooks) ์‹œ์Šคํ…œ์„ ํ†ตํ•ด ๋ชจ๋“ˆํ™”๋œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์ถ•์„ ์ง€์›ํ•˜๋ฉฐ, ํ˜„๋Œ€์ ์ธ ์•„ํ‚คํ…์ฒ˜(FSD) ๋ฐ ์ตœ์ ํ™” ๋„๊ตฌ(React Compiler)๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋Œ€๊ทœ๋ชจ ์‹œ์Šคํ…œ์œผ๋กœ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋‹ค. ## ๐Ÿ“– Core Content 1. **ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์•„ํ‚คํ…์ฒ˜ (FSD)** - ๋‹จ์ˆœ ํŒŒ์ผ ํƒ€์ž… ๋ถ„๋ฆฌ์—์„œ ๋ฒ—์–ด๋‚˜ ๋น„์ฆˆ๋‹ˆ์Šค ๊ธฐ๋Šฅ(Feature) ์ค‘์‹ฌ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ  ์บก์Аํ™”๋ฅผ ๊ฐ•ํ™”ํ•œ๋‹ค. 2. **์„ธ๋ถ„ํ™”๋œ ์ƒํƒœ ๊ด€๋ฆฌ** - ๋กœ์ปฌ ์ƒํƒœ, ์ „์—ญ ์•ฑ ์ƒํƒœ(Zustand/Redux), ์„œ๋ฒ„ ์ƒํƒœ(TanStack Query)๋กœ ์—ญํ• ์„ ๋ถ„๋ฆฌํ•˜์—ฌ ๋ฆฌ๋ Œ๋”๋ง ํญํฌ ํ˜„์ƒ์„ ๋ฐฉ์ง€ํ•œ๋‹ค. 3. **์ž๋™ํ™”๋œ ์„ฑ๋Šฅ ์ตœ์ ํ™”** - **React Compiler**: ๋นŒ๋“œ ํƒ€์ž„ ์ž๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜์œผ๋กœ ์ˆ˜๋™ `useMemo` ๋“ฑ์˜ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•œ๋‹ค. - **์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…**: `React.lazy`์™€ Suspense๋ฅผ ํ†ตํ•ด ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ตœ์ ํ™”ํ•œ๋‹ค. 4. **๋ณต์›๋ ฅ ์žˆ๋Š” ์—๋Ÿฌ ํ•ธ๋“ค๋ง** - **Error Boundaries**: ๋Ÿฐํƒ€์ž„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—๋Ÿฌ๋ฅผ ํฌ์ฐฉํ•˜์—ฌ ์ „์ฒด ์•ฑ ๋‹ค์šด์„ ๋ฐฉ์ง€ํ•˜๊ณ  Fallback UI๋ฅผ ์ œ๊ณตํ•œ๋‹ค. 5. **์—”์ง€๋‹ˆ์–ด๋ง ์›์น™์˜ ์ค€์ˆ˜** - SOLID, DRY, KISS, YAGNI ์›์น™์„ ์ปดํฌ๋„ŒํŠธ ๋ฐ ์ปค์Šคํ…€ ํ›… ์„ค๊ณ„์— ์ฒ ์ €ํžˆ ์ ์šฉํ•˜์—ฌ ๊ธฐ์ˆ  ๋ถ€์ฑ„๋ฅผ ์ตœ์†Œํ™”ํ•œ๋‹ค. ## โš–๏ธ Trade-offs & Caveats - **์ž์œ ๋„์˜ ๋Œ€๊ฐ€**: ํŠน์ • ๊ตฌ์กฐ๋ฅผ ๊ฐ•์ œํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ๋‹จ๊ณ„์—์„œ ๋ช…ํ™•ํ•œ ์•„ํ‚คํ…์ฒ˜ ๊ฐ€์ด๋“œ๋ผ์ธ์ด ๋ถ€์žฌํ•  ๊ฒฝ์šฐ ์ฝ”๋“œ๋ฒ ์ด์Šค๊ฐ€ ๋น ๋ฅด๊ฒŒ ์ŠคํŒŒ๊ฒŒํ‹ฐํ™”๋  ์ˆ˜ ์žˆ๋‹ค. - **์ถ”์ƒํ™” ๋น„์šฉ**: ํ›…๊ณผ ์ปดํฌ๋„ŒํŠธ ํ•ฉ์„ฑ์„ ํ†ตํ•œ ๊ณ ๋„์˜ ์ถ”์ƒํ™”๋Š” ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด์ง€๋งŒ, ๊ณผํ•  ๊ฒฝ์šฐ ์ฝ”๋“œ์˜ ํ๋ฆ„์„ ํŒŒ์•…ํ•˜๊ธฐ ์–ด๋ ต๊ฒŒ ๋งŒ๋“œ๋Š” ์ธ์ง€์  ๋ถ€ํ•˜๋ฅผ ์ดˆ๋ž˜ํ•œ๋‹ค. - **๋ฒ„์ „ ๋ณ€ํ™”์˜ ์†๋„**: Server Components, React Compiler ๋“ฑ ํŒจ๋Ÿฌ๋‹ค์ž„์ด ๋น ๋ฅด๊ฒŒ ๋ณ€ํ™”ํ•˜๋ฏ€๋กœ ํŒ€์˜ ๊ธฐ์ˆ  ์Šคํƒ์„ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•ด์•ผ ํ•˜๋Š” ์šด์˜ ๋ถ€๋‹ด์ด ์žˆ๋‹ค. ## ๐Ÿ”— Knowledge Connections ### Related Concepts - **Feature-Sliced Design (FSD)**: ๋Œ€๊ทœ๋ชจ ๊ตฌ์กฐํ™”์˜ ํ‘œ์ค€ (๊ด€๊ณ„: ์•„ํ‚คํ…์ฒ˜ ๋ชจ๋ธ) - **React Compiler**: ์ฐจ์„ธ๋Œ€ ์ž๋™ ์ตœ์ ํ™” ์žฅ์น˜ (๊ด€๊ณ„: ์„ฑ๋Šฅ ๊ฐœ์„  ๋„๊ตฌ) - **State Management**: ๋ฐ์ดํ„ฐ ํ๋ฆ„ ์ œ์–ด์˜ ํ•ต์‹ฌ (๊ด€๊ณ„: ์‹œ์Šคํ…œ ์‹ ๊ฒฝ๋ง) ### Deeper Research Questions 1. React Compiler ์•ˆ์ •ํ™” ์ดํ›„, ์ˆ˜๋™ ๋ฉ”๋ชจ์ด์ œ์ด์…˜(useMemo ๋“ฑ)์ด ์—ฌ์ „ํžˆ ํ•„์š”ํ•œ ์œ ์ผํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค๋Š” ๋ฌด์—‡์ธ๊ฐ€? 2. FSD ์•„ํ‚คํ…์ฒ˜์—์„œ 'Entities'์™€ 'Features' ๊ฐ„์˜ ์˜์กด์„ฑ ์—ญ์ „์„ ํ†ตํ•ด ๋„๋ฉ”์ธ ์ˆœ์ˆ˜์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๊ฐ€์žฅ ์šฐ์•„ํ•œ ๋ฐฉ๋ฒ•์€? 3. Context API์˜ ๋ธŒ๋กœ๋“œ์บ์ŠคํŠธ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ 'Context Splitting' ํŒจํ„ด์˜ ํ•œ๊ณ„์™€ ๋Œ€์•ˆ์€? 4. Error Boundary๊ฐ€ ์žก์ง€ ๋ชปํ•˜๋Š” ๋น„๋™๊ธฐ ์—๋Ÿฌ๋ฅผ ์ „์—ญ ๋ชจ๋‹ˆํ„ฐ๋ง ์‹œ์Šคํ…œ๊ณผ ํ†ตํ•ฉํ•˜๊ธฐ ์œ„ํ•œ ์ตœ์ ์˜ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„๋Š”? 5. Concurrent Mode์—์„œ `useTransition`๊ณผ `useDeferredValue`๊ฐ€ ์‹ค์ œ ์‚ฌ์šฉ์ž ์ฒด๊ฐ ์„ฑ๋Šฅ(INP)์— ๋ฏธ์น˜๋Š” ์ •๋Ÿ‰์  ์˜ํ–ฅ์€? ### Practical Application Contexts - **์‹ ๊ทœ ํ”„๋กœ์ ํŠธ ์„ค๊ณ„**: FSD ํด๋” ๊ตฌ์กฐ์™€ ์ƒํƒœ ๊ด€๋ฆฌ ์Šคํƒ(Zustand/Query) ์„ ์ •์„ ํ†ตํ•œ ์•ˆ์ •์  ๊ฐœ๋ฐœ ๊ธฐ๋ฐ˜ ๋งˆ๋ จ. - **๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ˜„๋Œ€ํ™”**: ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ›… ๊ธฐ๋ฐ˜์œผ๋กœ ์ „ํ™˜ํ•˜๊ณ  ๋ถˆํ•„์š”ํ•œ ์ดํŽ™ํŠธ๋ฅผ ์ œ๊ฑฐํ•˜์—ฌ ์„ฑ๋Šฅ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ ๊ฐ•ํ™”. ### Adjacent Topics - **Vite & Modern Build Tooling** - **Design Systems & Storybook** - **Server Components (RSC) & Streaming**