Vue.js 3.6 렌더링 / 3.7 이벤트 핸들링

Vue.js 3.6 렌더링

개념

렌더링은 컴포넌트의 템플릿을 해석해서 가상 DOM을 만들고 이를 브라우저의 DOM에 표시하는 것을 말한다. 렌더링 과정은 다음과 같다.

1. 컴포넌트는 브라우저에 DOM을 표시하기 전 가상 DOM으로 미리 변환해야 한다.
2. 컴포넌트는 가상 DOM으로 변환하기 위해 컴포넌트가 사용할 템플릿이 지정된 el, template, render 옵션 중 하나를 찾는다.
3. 앞 옵션 중 하나를 찾으면 컴포넌트를 더 빠르게 표시하기 위해 HTML 템플릿을 가상 DOM으로 변환하는 과정을 거친다.
4. 가상 DOM으로 변환할 때는 컴포넌트의 상태와 computed 속성값, DOM과 브라우저에서 발생하는 이벤트를 처리할 수 있도록 바인딩을 한다.
5. 바인딩이 완료되면 가상 DOM이 만들어지고 컴포넌트에 변경 사항이 발생했을 때 가상 DOM을 수정하고 다시 브라우저의 DOM에 업데이트한다.

Vue.js 3.7 이벤트 핸들링

개념

웹 애플리케이션은 기본적으로 사용자가 브라우저의 링크를 클릭하거나 텍스트 입력 박스에 글자를 입력하고 버튼을 누르는 등의 행동을 처리하려고 서버와 통신한다.

예를 들어, 웹 페이지에 링크를 클릭하면 링크에 설정된 웹 페이지로 이동한다. 온라인 쇼핑몰에서 제품을 주문할 때 '담기' 버튼을 클릭하면 장바구니에 제품을 담는다. 한편 단순히 웹 페이지의 링크를 클릭하는 일도 있지만 텍스트 박스에 글자를 입력하거나 버튼을 눌렀을 때도 프로그래머가 의도한 별도의 동작이 실행되어야 할 상황도 있다.

웹 페이지에서 발생하는 이런 일련의 행동을 '이벤트'라고 한다. 이벤트의 처리 과정은 다음과 같다.

1. 브라우저가 이벤트를 감지하면 DOM의 어떤 엘리먼트에서 이벤트가 발생했는지 찾는다.
2. 엘리먼트에 발생한 이벤트를 처리할 자바스크립트 함수가 있는지 확인한다.
3. 2에서 확인한 자바스크립트 함수가 있으면 해당 함수를 실행한다.

이벤트 핸들링은 웹 페이지에 발생한 이벤트를 처리하는 것을 말한다. 그리고 이벤트 핸들링에 사용하는 자바스크립트 함수를 **이벤트 핸들러**라고 한다. 보통 이벤트 핸들러는 DOM에서 발생하는 이벤트를 처리한다. 그리고 Vue 컴포넌트로 구성된 Vue.js 프로그램의 이벤트 핸들러는 DOM에서 발생하는 이벤트뿐만 아니라 Vue 컴포넌트에서 발생하는 이벤트를 처리하기도 한다.

★ Vue 컴포넌트 하나에서 웹 페이지의 모든 DOM 이벤트를 처리하지 않는다는 사실을 기억해두기 바란다.

컴포넌트가 DOM 일부분을 컴포넌트 템플릿으로 처리하기 때문이다.