원쌤의 Vue.js 퀵스타트 책을 보았다(Vue3)_1

회사에서는 현재 수행중인 프로젝트 기준으로 프론트 서버를 도입하고자 하였다.

이 경우 React와 Vue가 결국 대안으로 떠오르게 되었는데 Vue의 경우에는 문법적으로 지정된 룰 등이 명확하여 모두가 스터디 하면서 새로 만들어갈 프로젝트임에 있어서 가이드 라인이 조금 더 수월하게 잡힐듯 해 선정되었다.

 

1차적으로 프로젝트 환경 구성이 들어가기 전에 먼저 Vue3버전으로 작성된 책을 기준으로 먼저 사내 스터디를 진행 한 뒤 프로젝트를 점진적으로 진행 시키기로 되었다.

 

책주소 (책 광고를 해준다고 뭘 받고 그런게 아닙니다)

https://www.yes24.com/Product/Goods/118996796

원쌤의 Vue.js 퀵스타트 - 예스24

 

1. 1장

1장의 경우

Vue을 사용한 사람들을 위한 간단한 설치 및 설치도구, 개발도구 등에 대한 설명이 있었다.

이 경우에는 자세한 내용은 생략한다!

 

2. 2장

2장의 경우

Vue도 그렇고 React도 그렇고 어느정도 JS에 대한 사전지식을 필요로 하기 때문에 ES6 문법 및 Vue에서 Proxy개념을 사용하여 어떻게 변경되는 값을 감시 및 랜더링을 수행하는지에 대한 개념을 알 수 있게 된다.

es6문법에 대한 설명들과 this에 대한 설명은 다른 블로그에도 잘 설명되어 있기 때문에 Vue에서 주로 사용하는 Proxy개념에 대해서만 간략하게 본다.

 

Proxy

프록시는 객체의 속성을 읽어오거나 설정하는 작업을 가로채기 위해 래핑할 수 있도록 하는 객체이다.

특정 프록시 객체의 속성에 접근 할 때 개발자가 원하는 지정된 작업을 수행하도록 할 수 있다.

책 내용 중 일부 발췌.

let obj = { name : "홍길동", age : 20};
const proxy = new Proxy( obj, {
		get: function(target, key) {
			console.log("## get "+key);
			if(!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다`);
			return target[key];
		},
		set : function(target, key ,value){
			console.log("## set "+key);
			if(!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다`);
			target[key] = value;
		}

})

console.log(proxy.name);
proxy.name="이몽룡";
proxy.age = 30;

위와 같은 Proxy에 대한 설명을 왜 하는가 궁금했고, 그 부분에 대해서 chatGpt에게 물어보았다.

질문
Vue3에서 Proxy가 어떻게 쓰이는지 간단하게 좀 설명해줄래?

답변

Vue.js 3에서 Proxy는 상태 관리와 반응성을 구현하는 데 사용되는 중요한 개념 중 하나입니다. Proxy는 Vue 2의 Object.defineProperty를 대체하여 객체의 속성을 감시하고 변경사항을 감지할 수 있는 방법을 제공합니다.

Proxy를 사용하여 Vue 3 애플리케이션에서 반응성을 설정하는 일반적인 방법은 다음과 같습니다:

1. 상태 객체 생성: 먼저 Vue 컴포넌트 내에서 사용할 상태 객체를 생성합니다. 이 객체는 반응적인 데이터를 포함합니다.

const state = {
  count: 0,
  text: "안녕하세요",
};

2. Proxy 생성: Proxy를 사용하여 상태 객체를 감싸고 변경사항을 감지할 수 있는 프록시를 생성합니다. 이때 reactive 함수를 사용할 수 있습니다.

import { reactive } from 'vue';

const stateProxy = reactive(state);

 

3. Vue 컴포넌트에서 사용: 이제 stateProxy를 Vue 컴포넌트 내에서 사용할 수 있습니다. Vue는 이 객체를 모니터링하여 데이터 변경 사항을 자동으로 감지하고 화면을 업데이트합니다.

<template>
  <div>
    <p>{{ stateProxy.text }}</p>
    <p>Count: {{ stateProxy.count }}</p>
    <button @click="incrementCount">증가</button>
  </div>
</template>

<script>
export default {
  setup() {
    const stateProxy = reactive({
      count: 0,
      text: "안녕하세요",
    });

    const incrementCount = () => {
      stateProxy.count++;
    };

    return {
      stateProxy,
      incrementCount,
    };
  },
};
</script>

4. 변경사항 자동 감지: stateProxy의 속성에 변경을 가하면 Vue는 이를 자동으로 감지하고 관련된 뷰를 업데이트합니다. 위의 예제에서는 incrementCount 함수가 stateProxy.count를 증가시킬 때마다 화면에 반영됩니다.

Proxy를 사용하면 Vue 3에서 더 효율적이고 간단한 상태 관리를 할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킵니다.

 

위와같이 대답해주었다.

결국 Vue에서는 Proxy로 감싸진 객체가 변경되면 내부로직에 따라 변경을 감지하고 그 값이 변경되면 다시 랜더링 하는 형태로 동작하기 때문에 책의 초반에 설명을 해 준것같다.