Vue 반응성 분석 (1) : 인트로 (Intro)

리액트(react), 뷰(Vue) 등 많은 SPA 프레임워크(라이브러리라고 부르기도 함)은 자신만의 반응성(Reactivity) 엔진을 가지고 있다. 반응성은 선언적 방법으로 변경 사항을 적용할 수 있게 해주는 프로그래밍 패러다임이다. 예를 들어 어떤 데이터가 변경되었을 때 화면 렌더링이 자동으로 수행된다면 이걸 반응성이 있다고 부른다.

 

기존 프론트엔드 개발이 화면을 어떻게 그릴지에 초점을 맞추고 개발했다면, SPA 프레임워크들이 나온 이후에는 데이터를 중심으로 데이터가 변경되면 화면이 어떻게 변할지에 초점을 맞추고 개발을 하게 되었다. 개발자는 데이터를 다루는 데 집중하고 데이터가 바뀌면 데이터에 맞는 화면 렌더링은 프레임워크에 위임하는 것이다. 그래서 요즘 SPA 웹 개발을 반응형 프로그래밍이라고 부르기도 한다.

 

반응성이 프론트엔드 개발에 핵심인 만큼 반응성이 어떻게 동작하는지 제대로 이해하는 것이 중요하다. 마치 마법처럼 느껴지는 이 반응성을 직접 구현해 보자. 코드는 Vue의 반응성 원리를 기준으로 구현할 것이고, 원리 위주로 구현할 것이며 실제 Vue 코드와 정확히 일치하진 않는다. Vue의 반응성은 Vue2와 Vue3가 다르게 구현이 되어있다. Vue2, Vue3 각 반응성 모두 구현해 보자. 아래는 Vue 관련해서 많이 받았던 질문들인데, 이 글을 읽으면 질문들이 다 해결될 것이다.

 

Vue2 관련

• 왜 처음에 data 옵션에 미리 프로퍼티가 선언이 되어있어야 하는지
• arr[2] = 3 이런 식으로 데이터를 변경했을 때는 왜 반응성이 동작을 안 하는지
• computed는 함수인데, 사용할 때는 어떻게 this.total 이렇게 변수 사용하듯이 사용할 수 있는지

 

Vue3 관련

• Vue2와 Vue2 반응성 구현 차이
• reactive와 ref 차이점
• ref와 computed를 사용할 때 .value를 사용하는 이유