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

안녕하세요 🙂

인프런 AI 답변을 읽어 보시면 문제가 해결될 수 있을 거예요.

만약 그래도 해결이 안된다면 소스코드 Github 주소을 남겨주시면 제가 확인 후 회신 드릴게요.

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

언급하신 문제는 props 전달 시 타입 불일치로 인해 발생하는 경고 메시지와, undefined 값과 관련된 문제입니다.

문제 1: 타입 불일치 경고

<PostDetailView :id="1"></PostDetailView> 사용 시 발생하는 경고는 defineProps에서 id의 타입이 String으로 정의되었을 때, 숫자 타입을 전달하면서 발생하는 것입니다. 이 경우 String 타입으로 변환하여 통과시켜야 합니다.

<PostDetailView :id="String(1)"></PostDetailView>

또는 id의 타입을 변경하여 숫자도 허용하게 할 수 있습니다.

const props = defineProps({
  id: [String, Number]
});

문제 2: undefined 값 전달

<PostDetailView :id="abc"></PostDetailView>의 경우, abc 변수가 Vue 컴포넌트의 data나 setup 함수 내에서 선언되지 않았기 때문에 undefined 값으로 처리되고 있습니다. 이를 해결하기 위해 해당 변수가 초기화되어 있는지 확인하시고, 적절한 값이 할당되어 있는지를 체크해주세요.

예시:

<script setup>
import { ref } from 'vue';

const abc = ref('someId'); // 'abc' 변수를 선언 및 초기화
</script>

<template>
  <PostDetailView :id="abc"></PostDetailView>
</template>

추가 참고 자료

• Vue 공식 문서 - Props
  

• 유사한 질문 해결 링크: 페이지 컴포넌트에 props 전달하는 부분 관련
  

• 위 질문에서는 문자열과 숫자 타입의 차이에 대해 설명하고 있으며, v-bind를 사용할 때 생기는 형변환 문제에 대해 논의하고 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.