Vue.js는 선언적 접근 방식을 사용하여 UI를 구성한다. 작성한 템플릿 코드를 기반으로 UI를 생성한다는 것을 의미하는데, 선언적 접근 방식이 뭘까?
선언적 접근방식
선언적(declarative) 방식은 코드에서 어떤 동작을 수행해야 하는지 덜 명시적으로 지정한다. 대신, 코드는 원하는 결과를 설명한다. 예를 들어, 뷰에서 템플릿을 사용하여 웹 페이지에서 표시할 데이터를 정의하고, 뷰는 이 템플릿을 해석하여 페이지에 필요한 DOM 요소를 생성한다.
뷰의 템플릿은 HTML과 매우 유사하지만 뷰 디렉티브(directive)를 포함할 수 있다. 디렉티브는 뷰에서 제공하는 특별한 속성으로, 뷰가 DOM을 업데이트 하는 방법을 지정하는데 사용된다고한다.
뷰의 선언적 접근 방식은 데이터 바인딩(data binding)을 포함한다. 데이터 바인딩은 뷰 애플리케이션에서 데이터와 UI를 동기화하는데 사용된다. 뷰는 데이터 변경사항을 감지하고, UI를 자동으로 업데이트한다. 이를 통해 직접 DOM을 조작하지 않아도 되도록 도와준다.
따라서 뷰의 선언적 접근방식은 코드의 가독성과 유지보수성을 향상시키는데 도움이 된다.
<!-- Vue.js 템플릿 -->
<div v-bind:style="{ backgroundColor: bgColor, color: textColor }">
This is a Vue.js template!
</div>- 데이터와 템플릿을 결합하여 원하는 결과를 설명
- 뷰는 이 템플릿을 해석하여 페이지에 필요한 DOM요소를 생성
명령형 방식
반면, 명령형(imperative) 방식은 코드에서 어떤 작업을 수행해야 하는지 명시적으로 지정하는 방식이다. 예를 들어, 웹 페이지에서 DOM 요소를 선택하고 해당 요소에 대한 스타일을 설정하는 JavaScript 코드를 작성하는 것과 같다. 이 방식은 원하는 동작을 정확하게 지정할 수 있지만, 코드가 길어지고 유지 보수가 어려워지는 단점이 있다.
// HTML 요소 선택
var element = document.getElementById('my-element');
// 스타일 지정
element.style.backgroundColor = 'blue';
element.style.color = 'white';