2026.02.03

Vue.js(2) ref

1 ref의 정체와 .value의 필연성

ref의 정체는 무엇이며, 왜 .value로 접근해야하는 경우가 있을까?

• ref는 전달받은 인자를 받아 .value 속성을 가진 **반응형 객체(RefImpl)**로 감싸서 반환하는 함수

• 왜 ref를 사용하는가?

• JS의 기본 자료형은 참조 타입이 아닌 값 자체로 전달되므로 값이 변경되어도 Vue가 이를 추적할 방법이 없음

• 이를 해결하기 위해 Vue는 기본 타입을 객체로 래핑하여 메모리상의 동일한 주소를 참조함

• 또한 Vue는 ref의 value 속성이 바뀔 때마다 반응형 시스템이 이를 감지함

• 스크립트 vs 템플릿의 차이

• setup 에서는 실제 객체인 ref 인스턴스에 접근하므로 .value를 명시 필요

• template 에서는 Vue가 내부적으로 Unwrapping 과정을 거치므로 변수명만 사용 가능

  • 즉, 해당 변수가 ref인지 확인하고 자동으로 .value를 추출하여 보여줌

2. 반응형 API의 변주와 도구들

ref, reactive... 등 종류가 많던데?

• 반응형 상태 관리는 결국 ref와 reactive라는 두 줄기에서 시작되는것!

• 나머지는 상황에 따른 최적화나 조작을 위한 변주에 불과함!!!

• ref (모든 타입의 반응성)

  • 기본 자료형(Number, String 등)과 객체 모두 사용 가능
  • 스크립트 영역에서는 .value, 템플릿 변수명만으로 접근

• reactive (객체/배열 전용 반응성)

  • .value 없이 속성에 직접 접근할 수 있어 코드가 간결
  • 단, 기본 자료형에는 사용할 수 없으며, 분해 할당 시 반응성을 상실하므로 원본 객체 형태를 유지해야 함

• shallowRef (얕은 반응성 관리)

  • 객체 내부 속성의 미세한 변경은 감지 X
  • depth 1까지만
  • 오직 .value 자체가 통째로 교체될 때만 UI를 업데이트
  • 대규모 리스트나 외부 라이브러리 인스턴스를 다룰 때 성능 최적화 용도로 사용

• isRef / isReactive (상태 확인)

  • 데이터가 ref인지, 혹은 프록시 형태의 reactive인지 판별하여 boolean 값을 반환
  • 전달받은 인자의 데이터 타입을 검사해야 하는 조건부 로직에서 사용

• unref (안전한 값 추출)

  • 대상이 ref라면 .value를, 일반 값이라면 대상 자체를 반환
  • ref와 일반 값을 모두 수용해야 하는 유틸리티 함수를 작성할 때 로직의 범용성 높여줌

• toRaw (순수 객체 복구)

  • 반응형 프록시(Proxy)를 순수 JS 객체로 환원
  • 서버 전송 전 데이터를 직렬화(JSON 변환)하거나, 반응형 시스템의 간섭 없이 원본 데이터를 읽어야 할 때 사용

• markRaw (반응성 제외 표시)

  • 특정 객체가 이후에도 절대로 반응형으로 변하지 않도록 영구적인 표식 남김
  • 지도 인스턴스나 차트 라이브러리 같은 대형 자산을 다룰 때 불필요한 추적 오버헤드를 방지

언제 어떻게 사용하는게 좋을까?

• 데이터 성격에 따른 선택
  • 기본적으로는 ref를 사용
  • 객체의 Depth가 깊고 속성 접근이 잦은 경우에는 reactive를 고려
  • 단, 데이터의 불변성을 유지하거나 대규모 데이터를 다룰 때는 shallowRef가 성능 면에서 유리
• 데이터 전송의 안정성
  • JSON.stringify를 수행하거나 외부 라이브러리와 통신할 때는 toRaw나 unref를 통해 Raw Data로 변환해 에러 방지
• 유연한 함수 설계
  • 컴포넌트 외부의 유틸리티 함수를 만들 때 인자로 ref와 일반 값 모두를 수용하고 싶다면?
  • 내부적으로 unref를 사용하자!

3. 프록시 탈출하기

• Vue의 반응형 객체는 내부적으로 Proxy 기반으로 동작함
• 이는 일종의 싱글톤 기반의 스마트 포인터 처럼 작동하며, 원본 데이터를 감시하는 막이 씌워진 상태

문제는 서버로 데이터를 보낼 때 발생

대부분의 라이브러리(axios 등)나 JSON.stringify()는 객체를 직렬화할 때 프록시 구조를 해석하려다 의도치 않은 결과를 초래하거나, 순환 참조 등의 에러를 발생시킬 수 있다. 특히 데이터의 규모가 크거나 복잡하게 중첩된 경우, 반응형 객체 그대로를 JSON으로 변환하는 것은 위험하다.

• 안전한 처리 방식
  • 서버에 데이터를 전송하기 전에는 반드시 반응성이라는 껍데기 벗겨내기
• toRaw()의 활용
  • reactive 객체를 순수 JSON 객체로 변환할 때 가장 확실한 방법
• markRaw()의 활용
  • 특정 객체가 절대로 반응형으로 변하지 않도록 표시하여, 전송용 데이터가 불필요하게 반응형 시스템에 편입되는 것을 방지