Q1: Vue.js에서 `reactive()`와 `ref()`의 기본적인 차이점은 무엇인가요?
A1:
- `reactive()`는 객체 타입(객체, 배열 등)의 데이터를 반응형으로 만듭니다. 즉, 객체 내부의 속성 변화까지 추적할 수 있습니다.
- `ref()`는 원시 값(숫자, 문자열, 불리언 등)이나 객체를 감싸서 단일 반응형 값을 만듭니다. 값은 `.value` 프로퍼티를 통해 접근 및 변경합니다.
---
Q2: 언제 `reactive()`를 사용하고 언제 `ref()`를 사용해야 하나요?
A2:
- 객체나 배열처럼 복합 데이터 타입을 다룰 때는 `reactive()`를 사용합니다.
- 숫자, 문자열, 불리언처럼 단일 값일 때는 `ref()`가 더 적합합니다.
- 단, 객체를 `ref()`로 감싸도 되지만, 내부 변경 추적은 `.value` 안의 객체 전체로 처리되므로 변경 감지가 덜 직관적일 수 있습니다.
---
Q3: `ref()`로 객체를 감싸면 어떻게 동작하나요?
A3:
`ref()`로 객체를 감싸면 객체 전체가 `.value`속성에 저장되고, 그 안의 속성 변경은 직접 반응형으로 추적하지 못할 수 있습니다. 즉, 객체 내부 프로퍼티 변경 시 반응성이 잘 안 작동할 수 있으므로 일반적으로 `reactive()`를 권장합니다.
---
Q4: `.value` 프로퍼티는 언제 사용하는 건가요?
A4:
`ref()`가 반환한 객체의 실제 값에 접근하거나 변경할 때는 `.value`를 사용해야 합니다. 반면 `reactive()`는 Proxy 객체를 반환하므로 `.value`가 필요 없습니다.
---
Q5: 컴포넌트에서 템플릿 안에서는 `.value`를 써야 하나요?
A5:
템플릿 안에서는 Vue가 자동으로 `ref`의 `.value`를 언랩핑(unwrap)해주므로 `ref` 변수명만 써도 됩니다. 즉, 템플릿 내에서는 `.value` 없이 바로 사용 가능하지만, 스크립트 내부에서는 `.value`로 접근해야 합니다.
---
Q6: `reactive()` 객체 내 특정 속성만 `ref()`로 만들 수 있나요?
A6:
`reactive()`로 전체 객체를 만들고, 특정 속성만 `ref()`로 만들 수도 있습니다. 하지만 이런 혼용은 복잡성을 유발할 수 있으므로 보통은 객체 전체를 `reactive()`로 관리하거나, 별도 `ref()`로 분리하는 것이 좋습니다.
---
Q7: 성능 차이나 내부 동작 방식에서 유의할 점이 있나요?
A7:
- `reactive()`는 객체의 모든 속성을 Proxy로 감싸 인터셉트하여 전체 트리 변경을 추적합니다. 대규모 객체에선 오버헤드가 있을 수 있습니다.
- `ref()`는 단일 값 감지에 더 가볍고 명확하며, 특히 원시 값을 다룰 때 효율적입니다.
---
요약:
- `reactive()` : 객체/배열 전체를 반응형으로 만들 때, Proxy 기반, `.value` 불필요
- `ref()` : 단일 값(원시 또는 객체)을 감싸 반응형으로 만들 때, `.value` 프로퍼티를 통해 접근
두 API를 상황에 맞게 적절히 조합해 사용하는 것이 Vue 3 반응형 시스템의 핵심입니다.
<a href='https://sangseek.com/sangseeks/Vue.js/ko'>Vue.js</a>는 반응형 프로그래밍을 지원하는 프레임워크로, `reac<a href='https://sangseek.com/sangseeks/tive/ko'>tive</a>()`와 `ref()`는 Vue 3에서 제공하는 두 가지 주요 API입니다. 이 두 API는 상태 관리를 위한 반응형 객체를 생성하는 데 사용되지만, 그 사용 방식과 목적이 다릅니다. 아래에서 이 두 가지의 차이점과 각각의 사용 사례에 대해 자세히 설명하겠습니다. 1. `reactive()` `reactive()`는 객체를 반응형으로 만드는 함수입니다. 이 함수는 일반 JavaScript 객체를 받아서 Vue의 반응형 시스템에 의해 추적되는 객체로 변환합니다. `reactive()`를 사용하면 객체의 모든 속성이 반응형으로 변환되며, 객체의 속성이 변경될 때 Vue는 이를 감지하고 관련된 <a href='https://sangseek.com/sangseeks/컴포넌트/ko'>컴포넌트</a>를 자동으로 업데이트합니다. 사용 예시: ```javascript import { reactive } from 'vue'; const state = reactive({ count: 0, user: { name: 'Alice', age: 25 } }); // <a href='https://sangseek.com/sangseeks/상태 변경/ko'>상태 변경</a> state.count++; state.user.age++; ``` 특징: - 객체 전체 반응형 : `reactive()`는 객체의 모든 속성을 반응형으로 만들어, 중첩된 객체도 반응형으로 처리합니다. - 비교적 복잡한 상태 관리 : 여러 속성을 가진 객체를 다룰 때 유용합니다. - Proxy 기반 : Vue 3의 반응형 시스템은 ES6 Proxy를 기반으로 하여, 객체의 속성 접근 및 변경을 감지합니다. 2. `ref()` `ref()`는 기본 데이터 타입(예: 숫자, 문자열, <a href='https://sangseek.com/sangseeks/불리언/ko'>불리언</a> 등)을 반응형으로 만들기 위해 사용되는 함수입니다. `ref()`는 단일 값에 대한 반응형 참조를 생성하며, 이 값은 `.value` 속성을 통해 접근하고 수정할 수 있습니다. 사용 예시: ```javascript import { ref } from 'vue'; const count = ref(0); // 상태 변경 count.value++; ``` 특징: - 단일 값 반응형 : `ref()`는 기본 데이터 타입을 반응형으로 만들 때 사용됩니다. 객체나 배열을 사용할 경우, `reactive()`를 사용하는 것이 더 적합합니다. - `.value` 속성 : `ref()`로 생성된 반응형 데이터는 `.value` 속성을 통해 접근해야 합니다. 이는 Vue가 내부적으로 값을 추적하기 위한 방법입니다. - 간단한 상태 관리 : 단일 값이나 간단한 상태를 관리할 때 유용합니다. 3. 주요 차이점 요약 | 특성 | `reactive()` | `ref()` | |---------------|---------------------------------------|-------------------------------------| | <a href='https://sangseek.com/sangseeks/사용 대상/ko'>사용 대상</a> | 객체 및 중첩된 객체 | 기본 데이터 타입(숫자, 문자열 등) | | 접근 방식 | 속성 직접 접근 | `.value`를 통해 접근 | | 반응형 범위 | 객체의 모든 속성 | 단일 값 | | 사용 사례 | 복잡한 상태 관리 | 간단한 상태 관리 | 4. 결론 `reactive()`와 `ref()`는 Vue 3의 반응형 시스템에서 중요한 역할을 하며, 각각의 사용 사례에 따라 적절한 API를 선택하는 것이 중요합니다. 복잡한 객체를 다룰 때는 `reactive()`를, 단순한 값이나 상태를 다룰 때는 `ref()`를 사용하는 것이 좋습니다. 이러한 API를 적절히 활용하면 Vue.js 애플리케이션의 상태 관리를 보다 효율적으로 수행할 수 있습니다.
