@click.prevent="params._page = pageN... - 인프런

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

Pagination & Filter 구현하기

@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.

작성

ref로 선언한 객체(params)는 일반적으로 params.value._limit처럼 .value로 접근해야 하는데,
왜 <a @click.prevent="params._page = pageNum">와 같은 템플릿 안에서는 .value 없이도 작동하는건가요?
그런데 위처럼 .value를 사용하면 오히려
"Cannot set properties of undefined (setting '_page')" 에러가 나는 이유는 무엇인가요?

vue.js

답변 2

짐코딩

지식공유자

안녕하세요.

템플릿에서는 ref 객체가 자동으로 언래핑됩니다. (Vue 3 스펙~!)

<script setup>
const params = ref({ _page: 1, _limit: 10 })

// 스크립트에서는 .value 필요
console.log(params.value._page) // ✅
params.value._page = 2 // ✅
</script>

<template>
  <!-- 템플릿에서는 자동 언래핑 -->
  <a @click.prevent="params._page = pageNum">{{ pageNum }}</a> ✅
  
  <!-- 이미 언래핑된 상태에서 .value 사용하면 undefined -->
  <a @click.prevent="params.value._page = pageNum">에러!</a> ❌
</template>

요약:

템플릿: params._page (자동 언래핑)
스크립트: params.value._page (.value 필요)

에러가 나는 이유는 이미 언래핑된 객체에 .value를 또 붙여서 undefined.value._page가 되기 때문입니다.

Vue 3의 편의 기능이니 기억해두세요! 👍

인프런 AI 인턴

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

bebe님께서 질문주신 내용은 Vue 3의 ref와 관련된 내용입니다. Vue 3에서는 ref 객체가 템플릿 내에서 자동으로 언래핑되기 때문에, .value 없이도 값을 접근할 수 있습니다. 이는 Vue 3의 편리한 기능 중 하나로, 데이터 바인딩 시에 더욱 직관적으로 사용할 수 있도록 도와줍니다.

정확히 말하자면, 템플릿에서는 ref 값이 자동으로 언래핑되기 때문에 params.value._page 대신 params._page로 접근할 수 있으며, 이는 마치 일반적인 객체를 다루는 것과 비슷하게 느껴집니다.

다만, 스크립트 블록에서는 .value를 붙여야 합니다. 이 부분에서 혼동이 있을 수 있지만, 템플릿과 스크립트에서의 차이를 인식하면 좋습니다.

에러에 대한 부분에 대해서는, params가 아직 초기화되지 않은 상태에서 접근하려고 할 때 발생할 수 있습니다. ref로 선언했을 때는 기본적으로 undefined로 설정되기 때문에 바로 접근하려면 초기화를 통해 미리 객체의 구조를 잡아주어야 합니다.

더 깊이 있는 이해를 돕기 위해 관련된 질문이 있는 URL을 추가로 참고하실 수 있습니다:

Ref 객체의 값을 쓰려고 할 때, v-model에서 .value를 안하는 이유가?

해당 게시물에서는 템플릿 내에서 ref 객체가 왜 자동으로 언래핑되는지에 대한 설명이 포함되어 있습니다.

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

인프런 커뮤니티 질문&답변

@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.