ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
๐Ÿ’กSmart vs Presentational Components in Angular 2026: Where Does Ownership Really Belong?
Dev.toDev.to
Frontend

Angular Signals ๊ธฐ๋ฐ˜ ์ƒํƒœ ์†Œ์œ ๊ถŒ ๋ช…ํ™•ํ™”๋กœ ์ปดํฌ๋„ŒํŠธ ํ™•์žฅ์„ฑ ํ™•๋ณด

๐Ÿ’กSmart vs Presentational Components in Angular 2026: Where Does Ownership Really Belong?

abdelaaziz ouakala2026๋…„ 5์›” 18์ผ36๋ถ„intermediate

AI ์š”์•ฝ

Context

๊ธฐ์กด Angular ์•„ํ‚คํ…์ฒ˜๋Š” Smart/Presentational ๊ตฌ๋ถ„ ์—†์ด ์„œ๋น„์Šค ์ฃผ์ž…๊ณผ ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ํ˜ผ์žฌ๋˜์–ด ๊ฑฐ๋Œ€ Container ์ปดํฌ๋„ŒํŠธ์˜ ๋น„๋Œ€ํ™” ๋ฐ ์œ ์ง€๋ณด์ˆ˜ ํšจ์œจ ์ €ํ•˜ ์œ ๋ฐœ. ๋‹จ์ˆœํ•œ ํด๋” ๊ตฌ์กฐ๋‚˜ ์ปดํฌ๋„ŒํŠธ ํฌ๊ธฐ๋กœ ์—ญํ• ์„ ๊ตฌ๋ถ„ํ•˜๋˜ ๊ด€ํ–‰์œผ๋กœ ์ธํ•ด ์ƒํƒœ ์†Œ์œ ๊ถŒ์ด ๋ถˆ๋ถ„๋ช…ํ•œ ์„ค๊ณ„ ๊ฒฐํ•จ ๋ฐœ์ƒ.

Technical Solution

  • signal() ๋„์ž…์„ ํ†ตํ•œ ephemeral UI ์ƒํƒœ์˜ ๋กœ์ปฌ ์บก์Šํ™”๋กœ ์ƒ์œ„ Container์˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋ถ€๋‹ด ๊ฒฝ๊ฐ
  • Smart Component๋ฅผ Feature Orchestration Layer๋กœ ์ •์˜ํ•˜์—ฌ ๋ฐ์ดํ„ฐ ํŽ˜์นญ, Routing, Analytics ๋“ฑ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ์ฃผ์ž… ์ „๋‹ด
  • Presentational Component์˜ ์„œ๋น„์Šค ์ฃผ์ž…์„ ์—„๊ฒฉํžˆ ๊ธˆ์ง€ํ•˜๊ณ  Input/Output ๊ธฐ๋ฐ˜์˜ ์ธํ„ฐํŽ˜์ด์Šค ๊ณ„์•ฝ์œผ๋กœ ๊ฒฝ๊ณ„ ์„ค์ •
  • computed() ๋ฐ toSignal()์„ ํ™œ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ํ๋ฆ„์˜ ๋‹จ๋ฐฉํ–ฅ์„ฑ ํ™•๋ณด ๋ฐ ์ƒํƒœ ์ „์ด ๊ณผ์ •์˜ ๋ช…์‹œ์  ์ œ์–ด
  • OnPush ์ „๋žต์„ ๊ธฐ๋ณธ ์ ์šฉํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ Change Detection์„ ๋ฐฉ์ง€ํ•˜๊ณ  ๋ Œ๋”๋ง ํšจ์œจ ์ตœ์ ํ™”

์‹ค์ฒœ ํฌ์ธํŠธ

1. ์‹ ๊ทœ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ ์ „ '๋ฐ์ดํ„ฐ ๋ Œ๋”๋ง'์ธ์ง€ '๋ฐ์ดํ„ฐ ๊ฒฐ์ •'์ธ์ง€ ์—ญํ•  ์ •์˜

2. Presentational ์ปดํฌ๋„ŒํŠธ ๋‚ด ์„œ๋น„์Šค ์ฃผ์ž… ๋ฐ Router ์ ‘๊ทผ ์ฝ”๋“œ ์ œ๊ฑฐ

3. UI ์ „์šฉ ์ƒํƒœ(ํ† ๊ธ€, ํ˜ธ๋ฒ„ ๋“ฑ)๋Š” ์ „์—ญ ์ƒํƒœ๊ฐ€ ์•„๋‹Œ ๋กœ์ปฌ signal()๋กœ ์ฒ˜๋ฆฌ

4. ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ Input/Output ๊ธฐ๋ฐ˜์˜ ๊ณ„์•ฝ(Contract)์œผ๋กœ ๊ด€๋ฆฌ

ํƒœ๊ทธ

#OnPush#Smart vs Presentational#Angular Signals#Component Architecture#State Management
์›๋ฌธ ์ฝ๊ธฐ