Antigravity Agent
3.1 KiB
3.1 KiB
category, tags, title, description, last_updated
| category | tags | title | description | last_updated | |||
|---|---|---|---|---|---|---|---|
| Frontend |
|
Smart vs Dumb Components | 스마트(Smart) 및 덤(Dumb) 컴포넌트 패턴은 '컨테이너와 프레젠테이셔널(Container and Presentational)' 패턴으로도 잘 알려져 있으며, 애플리케이션의 상태 관리 로직과 UI 렌더링을 분리하는 설계 패턴입니다 [1-3]. | 2026-05-04 |
Smart vs Dumb Components
📌 Brief Summary
스마트(Smart) 및 덤(Dumb) 컴포넌트 패턴은 '컨테이너와 프레젠테이셔널(Container and Presentational)' 패턴으로도 잘 알려져 있으며, 애플리케이션의 상태 관리 로직과 UI 렌더링을 분리하는 설계 패턴입니다 [1-3]. 덤 컴포넌트는 오직 데이터 표시와 UI 구성에 집중하는 반면, 스마트 컴포넌트는 데이터 페칭 및 상태 관리를 전담하여 덤 컴포넌트에게 데이터를 전달하는 두뇌 역할을 합니다 [2, 4]. 이 패턴은 각 컴포넌트의 책임을 명확히 하여 코드의 재사용성을 높이고 유지보수와 테스트를 용이하게 만듭니다 [1-3].
📖 Core Content
- 스마트(컨테이너) 컴포넌트 (Smart/Container Components): 애플리케이션의 '두뇌' 역할을 수행하는 컴포넌트입니다 [2]. 주로 API 통신을 통한 데이터 페칭을 수행하고, 복잡한 로컬 상태나 전역 상태를 관리하는 등 사물들이 "어떻게 작동하는지"에 대한 비즈니스 로직을 처리합니다 [1, 2, 4]. 관리하고 있는 데이터를 렌더링하기 위해 하위의 덤 컴포넌트에게 주입(Drill down)합니다 [2].
- 덤(프레젠테이셔널) 컴포넌트 (Dumb/Presentational Components): 사물들이 "어떻게 보이는지(UI)"에만 전적으로 집중하는 '순수(Pure)' 컴포넌트입니다 [1, 2]. 백엔드 API나 전역 스토어의 존재를 전혀 알지 못하며, 오직 부모 컴포넌트로부터
props를 통해서만 데이터를 전달받습니다 [2]. 사용자와의 상호작용 발생 시 이를 직접 처리하지 않고 이벤트를 방출(Emit)하여 부모 컴포넌트에 위임합니다 [2]. - 관심사의 분리와 이식성: 비즈니스 로직과 UI 표현이 철저히 분리되므로, 개발자는 덤 컴포넌트를 앱의 다른 영역이나 전혀 다른 프로젝트에 쉽게 이동시켜 재사용할 수 있습니다 [2, 3].
⚖️ Trade-offs & Caveats
- 장점 (Pros): 컴포넌트를 독립적으로 테스트하고 스타일링 및 재사용하기가 매우 쉬워집니다 [1]. 데이터 페칭 로직이 분리되어 있으므로 UI 요소의 재사용성이 향상되며, 대규모 애플리케이션에서 복잡한 구조를 이해하고 유지보수하기 유리해집니다 [3, 4].
- 단점 (Cons / Caveats): 하나의 기능을 구현할 때 로직과 프레젠테이션을 별도의 컴포넌트로 강제로 분리해야 하므로, 전반적으로 관리해야 할 파일의 개수가 늘어나고 보일러플레이트(Boilerplate) 코드가 증가하는 부작용이 발생할 수 있습니다 [5].
Last updated: 2026-05-03