Vue 시작하기전 알아야할 핵심 특징 - 컴포넌트, 선언적렌더링, 반응성

Vue는 UI를 만들기 위한 자바스크립트 프레임워크이다. Vue를 사용하면 웹사이트 UI를 너무나 편하게 만들 수 있다.

Vue를 시작하려면 기본 개념을 먼저 알아야 한다. Vue의 가장 기초가 되는 개념은 바로 컴포넌트, 선언적 렌더링, 반응성이다.

 

 

컴포넌트 (Component)

가장 중요한 특징이라면 컴포넌트 기반의 프로그래밍 모델 방식을 제공한다.

이것은 React와 같은 현대의 대부분의 프론트엔드 개발 라이브러리나 프레임워크가 추구하는 방식이다.

Components

컴포넌트는 그림과 같이 모든 UI를 재사용 가능하도록 하나하나 쪼개서 캡슐화하는 것이다. 이렇게 쪼개진 하나하나가 컴포넌트이다.

이 컴포넌트를 어디서든 가져다가 붙이기만 하면 재사용이 너무 쉽고, 코드도 훨씬 간결해질 수 있다.

 

🚨 Vue에서는 이렇게 컴포넌트를 하나씩 개발해나가면 된다.

 

 

이것은 차세대 웹표준으로 개발중인 Web Components 와도 일맥상통하는 구조라고 볼 수 있다.

Web Components 에 대해 더 알고싶다면, 아래를 참고!!

- https://developer.mozilla.org/ko/docs/Web/Web_Components

웹 컴포넌트 | MDN

- https://www.webcomponents.org

webcomponents.org - Discuss & share web components

 

 

선언적 렌더링 (Declarative Rendering)

선언전 렌더링이라는 말이 도대체 무슨 말인가? 한글로 봐도 쉽게 이해하기가 어렵다.

일단 선언적 프로그래밍이라는 말이 있다. 여기서 선언적의 의미를 보면

 

선언적 (Declarative)

프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 무엇과 같은지를 설명하는 경우에 선언형 이라고 한다.
즉, "어떤 방법"으로 화면에 나타내야 하는지를 묘사하는게 아니라, "무엇"이 나타나야하는지를 묘사하는 것이다.

 

대충 감시 오실것이다.

선언적으로 렌더링한다는 것은 바로 화면에 무엇이 보일지를 정의만 하면 렌더링은 알아서 된다는 것이다.

우리는 화면에 렌더링을 어떻게 할지 신경쓸게 없다.

 

🚨 그냥 무엇을 렌더링 할지만 선언만 하면 우리의 할일은 끝이다.

 

컴포넌트를 렌더링 할때 HTML과 Vue에서 제공하는 Template 문법을 가지고 컴포넌트가 어떻게 보이면 되는지를 정의하면 된다.

쉽게 말해 HTML 형태로 컴포넌트의 형태를 정의하면 되는 것이다.

 

 

 

반응성 (Reactivity)

반응성이란 또 무엇일까? 화학반응, 신체반응, 이상반응..     핵심은 일맥상통한다.

 

일단 반응이란?

반응

자극에 대응하여 어떤 현상이 일어남. 또는 그 현상.

 

🚨 반응을 한다는 것은 무언가 자극이 있어야만 가능하다.

 

 

Vue에서의 반응이란 데이터가 변하면 화면이 자동으로 변하는 것이다.

Vue에서 반응

데이터의 변화 (자극)     →     화면 변화 (반응)

말이 어렵지 사실 아주 쉬운 개념이다.

데이터에 자극을 주면 화면에 반응이 자동으로 일어난다.

결국 우리는 데이터가 변하면 화면을 갱신해주는 노가다따위는 할 필요가 없다는 말이다.

선언적 렌더링 방식으로 컴포넌트의 형태를 정의해놓으면 여기에 연결된 데이터만 바꿔주면 알아서 바뀐 데이터가 렌더링된다.

 

그래서

이 얼마나 개발 노가다를 없애주는 컨셉들인가?

옛날에 jquery로 개발했던 시절들을 떠올려봐라..

..

DOM element를 찾아서 text나 value 값을 필요할때마다 바꿔주는 코드를 짰어야했다.

 

핵심 개념들은 결국 그런 개발 노가다를 없애주겠다는 것이다.