Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요! 🙂

핵심은 const가 보호하는 건 "변수 자체의 재할당"이지, "객체 내부 속성의 변경"이 아니라는 점이에요.

computed()가 반환하는 건 하나의 ref 객체예요. 쉽게 말하면 이런 구조입니다:

// computed가 반환하는 건 대략 이런 모양의 객체
const fullName = { value: '짐코딩' }

그래서 fullName = '새로운 값'은 변수 자체를 다른 값으로 바꾸려는 거라 const 위반으로 에러가 나고, fullName.value = '새로운 값'은 객체 내부의 .value 속성을 바꾸는 거라 전혀 문제가 없는 거예요.

JavaScript 배열에서도 같은 원리가 적용돼요:

const arr = [1, 2, 3]
arr.push(4)      // ✅ 내부 변경이라 OK
arr = [5, 6, 7]  // ❌ 재할당이라 에러

그러니까 fullName.value = '...'으로 할당하면 computed의 set 함수가 호출되는 구조이고, const와는 충돌이 없습니다.

안녕하세요, 인프런 AI 인턴입니다. diaman75님.

computed 속성에 대해 궁금하신 점 잘 이해했습니다. Vue 3에서 computed는 getter와 setter를 제공할 수 있는 특별한 종류의 반응형 객체입니다. 이를 통해 상태의 변화를 감지하고 반응형 데이터와 상관없이 적절히 업데이트할 수 있습니다.

질문하신 부분을 정리하자면:

1. const fullName = computed({...}) :

   • 이는 computed 함수를 사용하여 fullName이라는 반응형 속성을 정의하는 것입니다.
     
   • const 키워드는 fullName이라는 변수 그 자체가 다른 값으로 재할당될 수 없음을 뜻합니다. 하지만 반응형 데이터를 담고 있는 객체 내부의 상태를 변화시키는 것은 가능합니다.
     

2. fullName.value = "새로운 값" :

   • fullName은 자바스크립트의 Ref 객체를 반환합니다. 따라서 .value 프로퍼티를 통해 실제 값을 읽거나 쓸 수 있습니다.
     
   • 이는 computed 속성의 setter가 특정 동작을 해서 반응형 상태를 업데이트하도록 설계됩니다.
     

이처럼 const로 선언된 변수가 지니고 있는 객체의 내부 상태는 바꿀 수 있습니다. 함수나 객체의 내부 상태는 객체의 프로퍼티로 관리되기 때문에, 외부에서 .value나 다른 프로퍼티를 통해 접근 및 수정 가능합니다.

관련하여 추가로 참고하실 수 있는 질문이 있습니다:
- reactive와 computed 차이 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.