[View] UI를 다루는 구성 요소

뷰(View) 

웹이나 앱 개발에서 가장 눈에 띄는 부분은 사용자와 직접 상호작용하는 화면입니다. 이 화면을 구성하는 핵심 요소가 바로 뷰(View)입니다. ‘뷰’라는 용어는 단순히 HTML, XML과 같은 시각적인 결과물만을 의미하지 않고, 데이터와 로직으로부터 분리된 사용자 인터페이스 표현 계층을 의미합니다.
특히 MVC(Model-View-Controller) 패턴에서는 ‘뷰’가 담당하는 책임이 명확히 분리되어 있으며, 이 개념은 React, Angular, Vue.js 같은 최신 프레임워크에서도 여전히 중심적인 역할을 합니다.

---

1.  View란 무엇인가?

View(뷰)는 소프트웨어 아키텍처에서 사용자에게 보여지는 데이터의 시각적 표현을 담당합니다. 즉, 모델의 데이터를 화면에 보여주는 역할만을 담당하며, 비즈니스 로직이나 상태 변경 로직은 포함하지 않습니다.

View는 “무엇을 보여줄지”에만 집중하며, “어떻게 처리할지”는 다른 계층의 책임입니다.

 

---

2.  MVC 패턴에서의 View

MVC는 Model-View-Controller의 약자로, 애플리케이션의 구조를 세 부분으로 나누어 관심사의 분리를 도모합니다. 이 중 View의 역할은 다음과 같습니다.

View의 주요 책임

• 모델로부터 데이터를 전달받아 화면에 표시
• 사용자와의 상호작용을 컨트롤러에게 전달
• 직접 데이터를 변경하지 않음

[Model] ←-- 데이터 변경/조회 --→ [Controller] ←-- 사용자 입력 --→ [View]

• 예를 들어, 사용자가 버튼을 클릭하면 View는 해당 이벤트를 Controller에 전달하고, Controller는 모델을 갱신한 후 그 변경 사항을 다시 View가 렌더링합니다.

 

---

3.  현대 프레임워크에서의 View

React에서 View

React에서는 function component나 class component가 View를 구성합니다. JSX 문법을 통해 UI를 선언적으로 작성하고, props나 state를 기반으로 자동으로 리렌더링됩니다.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

• 이 컴포넌트는 View의 역할만 수행하며, 비즈니스 로직이나 상태는 외부에서 관리할 수 있습니다.

Vue.js에서 View

Vue는 템플릿 기반의 View 구조를 갖추고 있으며, v-bind, v-if 등 디렉티브를 사용해 모델 데이터를 UI에 바인딩합니다.

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return { message: '안녕하세요!' }
  }
}
</script>

Angular에서 View

Angular의 View는 Component HTML과 CSS로 구성되며, 데이터 바인딩, 이벤트 바인딩 등을 통해 Model과 Controller에 해당하는 서비스와 연결됩니다.

 

---

4.  View 구성 시 유의사항

1. 로직은 최대한 배제할 것
   • 복잡한 조건, 데이터 가공은 View가 아닌 Model/Service 레이어에서 처리합니다.
2. 재사용 가능한 컴포넌트화
   • 버튼, 카드, 리스트 등의 UI 요소는 재사용 가능하게 설계합니다.
3. 테스트 용이성 고려
   • 상태가 독립적이며 외부 입력에 따라 결정되는 구조로 만들면 테스트가 쉬워집니다.
4. 접근성 및 반응형 디자인 고려
   • 사용자 경험 향상을 위해 화면 해상도, 접근성(ARIA 등)을 항상 고려해야 합니다.

 

---

5.  비유로 이해하는 View

View는 마치 레스토랑의 접시와 같습니다. 손님에게 요리를 보기 좋게 담아내지만, 요리를 직접 만들지는 않습니다. (Model의 역할) 메뉴를 주문하거나 요청사항을 전달하는 일은 서버(Controller의 역할)가 담당합니다.

 

---

6.  마무리

• View는 데이터의 시각적 표현만 담당하며, 로직이나 상태 관리는 하지 않는 것이 원칙입니다.
• MVC 패턴에서 View는 Model과 Controller 사이에서 역할이 분명히 분리됩니다.
• React, Vue, Angular 등 최신 프레임워크도 View를 핵심 구성 요소로 다루며, 선언적 방식으로 UI를 구현합니다.
• View를 설계할 때는 단순하고 재사용 가능하며, 외부 로직과 분리된 구조로 만드는 것이 중요합니다.

 

---