728x90

해당 포스트는 생성형 AI를 사용해 만든 게시글입니다.

❓ Proxy 란

Proxy(프록시)는 "대리인"이라는 뜻을 가지고 있음
쉽게 말해, 어떤 객체를 직접 건드리지 않고, 그 객체를 대신해서 조작하는 역할을 함

마치 온라인 쇼핑몰에서 `구매 대행업체`를 이용하는 것과 비슷
해외 직구를 할 때 직접 구매하는 게 아니라, 구매 대행업체를 통해 물건을 받으면 여러 가지 이점이 생김
  • 배송 추적이 쉬워짐 🛒 (변경 사항을 알 수 있음)
  • 환율 변동을 관리해줌 💰 (특정 조건을 적용할 수 있음)
  • 불량 제품을 걸러줌 🚫 (데이터를 검증 가능)

Proxy도 같은 개념임 

객체의 값을 직접 변경하지 않고, Proxy를 거쳐서 값을 변경하면 추가적인 기능을 구현할 수 있음.

👀 Proxy의 필요성

직접 객체를 다룰 때의 문제점

JavaScript에서 객체를 직접 수정할 때 발생하는 몇 가지 문제가 있다.

1️⃣ 객체 변경을 추적하기 어려움

const user = { name: "Alice", age: 25 };
user.age = 30;
// 변경이 일어났지만, 언제 변경되었는지 알 수 없음!

 누가, 언제, 어떻게 변경했는지를 알 수 없으면 디버깅이 어렵고 유지보수가 힘듦

2️⃣ 새로운 속성 추가 감지 불가능 (Vue 2의 문제)

const user = { name: "Alice" };
user.email = "alice@example.com"; // Vue 2에서는 반응형으로 감지되지 않음!

새로운 속성을 추가해도 UI가 자동으로 업데이트되지 않음. → Vue 3에서는 `Proxy`로 해결!

3️⃣ 부수효과(Side Effect) 문제

const settings = { darkMode: false };
function enableDarkMode(config) {
  config.darkMode = true;
}
enableDarkMode(settings);
console.log(settings.darkMode); // true (어디선가 값이 변경됨)

객체를 직접 수정하면 원치 않는 곳에서도 값이 바뀔 수 있음! → Proxy를 사용하면 제한 가능!

Proxy를 사용하면?

Proxy를 사용하면 객체의 동작을 감지하고 추가적인 기능을 적용할 수 있음

📌 1️⃣ 변경 사항 추적 가능 (로그 기록)

const user = { name: "Alice", age: 25 };
const proxyUser = new Proxy(user, {
  set(target, prop, value) {
    console.log(`🔄 ${prop} 변경: ${target[prop]} → ${value}`);
    target[prop] = value;
    return true;
  }
});
proxyUser.age = 30; // 🔄 age 변경: 25 → 30

누가 언제 값을 변경했는지 쉽게 추적 가능

📌 2️⃣ 새로운 속성 추가도 감지 가능 (Vue 3의 반응형 시스템)

const user = {};
const proxyUser = new Proxy(user, {
  set(target, prop, value) {
    console.log(`✨ 새로운 속성 추가: ${prop} = ${value}`);
    target[prop] = value;
    return true;
  }
});
proxyUser.email = "alice@example.com"; // ✨ 새로운 속성 추가: email = alice@example.com

Vue 3에서는 Proxy를 사용해서 새로운 속성이 추가되어도 `반응형`으로 동작 가능

📌 3️⃣ 읽기 전용 객체 만들기 (값을 실수로 변경하지 않도록 보호)

const user = { name: "Alice" };
const readonlyUser = new Proxy(user, {
  set() {
    console.log("❌ 이 객체는 변경할 수 없습니다!");
    return false;
  }
});
readonlyUser.name = "Bob"; // ❌ 이 객체는 변경할 수 없습니다!

중요한 데이터가 실수로 변경되지 않도록 보호할 수 있음

🌱 Vue 3에서 Proxy의 활용 (반응형 시스템)

Vue 3에서는 Proxy를 사용해서 reactive()를 구현 예제

<script setup>
import { reactive } from 'vue';
const state = reactive({ count: 0 });
function increment() {
  state.count++; // Proxy가 변경을 감지하고 UI를 업데이트!
}
</script>

<template>
  <p>{{ state.count }}</p>
  <button @click="increment">+</button>
</template>

✔️ state.count가 변경될 때 Proxy의 set 트랩이 동작해서 자동으로 UI를 업데이트!

🎯 Proxy를 사용하면 뭐가 좋을까?

  일반 객체 조작  Proxy 사용 
변경 감지 ❌ 불가능 ✅ 가능 (변경 로그 기록 가능)
새로운 속성 추가 감지 ❌ 안됨 ✅ 가능 (Vue 3에서 활용)
읽기 전용 설정 ❌ 불가능 ✅ 가능 (변경 차단)
예제 user.age = 30; proxyUser.age = 30; // 로그 출력

Proxy는 객체의 동작을 가로채서 필요한 기능을 추가할 수 있는 강력한 도구!

Vue 3의 반응형 시스템은 Proxy를 기반으로 동작하며, `UI 자동 업데이트`가 가능!

728x90

티스토리툴바