메모리참조

1. 메모리 참조란?

메모리 참조(Memory Reference)는 변수나 객체가 메모리 상의 특정 위치를 참조하는 것을 의미

특히, JavaScript와 같은 언어에서는 원시 값(Primitive Type)과 참조 값(Reference Type)의 동작 방식이 다름.

• 원시 값(Primitive Type): 숫자, 문자열, 불리언, null, undefined와 같은 값은 메모리에 직접 값 자체가 저장됨. 따라서 다른 변수에 복사할 때 값이 복제됨.
• 참조 값(Reference Type): 객체, 배열, 함수와 같은 참조 타입은 값이 저장된 메모리 주소를 참조하게 됨. 즉, 변수에 객체를 할당하면 객체의 주소가 전달되므로, 복사된 변수와 원래 변수는 동일한 객체를 참조하게 됨

let a = 10;
let b = a;
b = 20;
console.log(a); // 10 (값 복사)

let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // 'Bob' (참조 복사)

위 예제에서 객체의 경우, obj1과 obj2가 같은 메모리 위치를 참조하기 때문에 하나의 변수에서 변경한 값이 다른 변수에서도 반영됨.

 

2. Vue.js와 메모리 참조의 관계

Vue.js에서 데이터와 컴포넌트 상태 관리 시 메모리 참조가 중요한 역할을 함. 특히, Vue는 반응형(Reactivity) 시스템을 통해 데이터가 변경되면 화면을 자동으로 업데이트함. 이 과정에서 객체나 배열과 같은 참조 타입의 데이터가 자주 사용됨.

Vue의 반응형 시스템에서 메모리 참조

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      }
    };
  },
  methods: {
    updateName(newName) {
      this.user.name = newName; // 같은 메모리 위치의 객체를 수정
    }
  }
};

위 코드에서 user 객체는 Vue의 반응형 데이터로 설정됨. **this.user.name**을 변경하면 Vue의 반응형 시스템이 이를 감지하고, 화면에 즉시 반영함. 이는 user 객체가 참조 타입이기 때문에 가능한 것임.

 

3. 배열과 객체의 참조 주의점

Vue에서 객체나 배열을 수정할 때는 반응형 데이터 갱신에 주의해야 함. 직접적으로 참조를 변경하면 Vue가 이를 감지하지 못할 수 있음.

배열 수정 예시:

this.items.push('새 항목'); // Vue가 감지함

this.items[0] = '변경된 항목'; // Vue가 감지하지 못할 수 있음

이러한 문제를 방지하기 위해 Vue는 배열과 객체를 반응형으로 처리할 때, push(), splice() 등의 메서드를 사용하는 것을 권장

 

4. 메모리 참조와 컴포넌트 간 데이터 전달

Vue 컴포넌트 간에 데이터를 전달할 때도 메모리 참조가 발생함. 부모 컴포넌트가 자식 컴포넌트에 props로 객체를 전달하면, 같은 메모리 위치를 참조하게 됨. 따라서 자식 컴포넌트에서 데이터 수정이 부모 컴포넌트에 영향을 미칠 수 있음.

예제: 부모-자식 간 데이터 전달

// 부모 컴포넌트
<ChildComponent :user="user" />

// 자식 컴포넌트
export default {
  props: ['user'],
  methods: {
    updateName(newName) {
      this.user.name = newName; // 부모의 user 데이터도 변경됨
    }
  }
};

이 경우, 자식 컴포넌트에서 user 객체를 수정하면 부모 컴포넌트의 데이터도 함께 변경됨. 이런 동작이 의도치 않게 발생하지 않도록 주의해야 함.

 

(Vue.js에서 메모리 참조는 데이터 관리와 반응형 시스템의 핵심적인 개념임. 객체와 배열은 참조에 의해 데이터가 전달되기 때문에, 변경 사항이 예상치 못하게 다른 곳에 영향을 줄 수 있음을 이해하고 주의해서 사용해야 함. 이를 통해 효율적인 데이터 관리와 유지보수성을 확보할 수 있음.)