페이지 컴포넌트에 props 전달하는 부분 관련

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

페이지 컴포넌트에 Props 전달

작성

446

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요,

함수로 props를 전달하는 부분 (강좌 12:00 ~)에서,

기존에는 받은 값을 int로 바꾸는 작업을 했었는데

함수로 전달하면서 애초에 int값을 주는 것으로 변경했습니다.

이 변화로 인해 기존 코드에서 parseInt 관련 부분을 삭제/수정했습니다.

그런데.. 12:57 부근에서

<PostDetailView id="1"> 을

<PostDetailView :id="1"> 로 변경했습니다.

이 작업이 어떤 의미를 갖나요?

v-bind를 추가한 것이 "1"을 string에서 int로 인식하게 하는게 이해가 되지 않습니다.

미리 감사합니다!

vue.js

답변 2

youakdl

선생님,

Q) <PostDetailView id="1"> -> <PostDetailView :id="1"> 이 작업의 의미
A) id 라는 속성값의 타입을 String으로 넘기는 것에서 Number로 넘기는 것으로 변경했음을 의미합니다.

이렇게 설명주셨는데, 단순히 넘겨지는 id값의 데이터타입변환만을 위해 :찍어주는건가요?? :id 하면 defineProps에서 정의된 id와 연결되서 값이 넘어가지는 걸로 이해했는데,
v-bind없이 id:"1"로 기재하면 어떻게 값이 전달되고 작동되는지 이해가 안됩니다:(

짐코딩

지식공유자

Q) id값의 데이터타입변환만을 위해 :찍어주는건가요??

A) id 값을 "숫자(number)" 타입으로 넘기기 위해 v-bind(:) 디렉티브를 사용한 것입니다. 만약 v-bind 디렉티브를 사용하지 않는다면 모든 값을 문자열(string)으로 인식이 될 테니까요

Q) v-bind없이 id:"1"로 기재하면 어떻게 값이 전달되고 작동되는지 이해가 안됩니다:(

A) HTML에서 속성에 값을 전달하면 그 값은 문자열입니다. 예를 들면

id="hello" // "hello" 문자열을 id 속성에 전달
id="123"   // "123" 문자열을 id 속성에 전달

v-bind:id="123" // 123 숫자값을 id 속성에 전달

v-bind:id="'hello'" // "hello" 문자열을 id 속성에 전달
v-bind:id="'123'"   // "123" 문자열을 id 속성에 전달

짐코딩

지식공유자

안녕하세요 :)

질문을 두 가지로 분리해서 답변 드릴게요~!

Q) <PostDetailView id="1"> -> <PostDetailView :id="1"> 이 작업의 의미
A) id 라는 속성값의 타입을 String으로 넘기는 것에서 Number로 넘기는 것으로 변경했음을 의미합니다.

Q) v-bind를 추가한 것이 "1"을 string에서 int로 인식하게 하는게 이해가 되지 않습니다.
A) 현재 게시글의 id 값은 1, 2, 3, 4, 5, 6, 7, 8, 9 ... 이러한 값 입니다. 이러한 값의 타입을 무엇일까요? 네! 맞습니다. number 타입입니다. 그래서 string 타입이 아닌 number타입으로 변경한 이유입니다. 만약에 id 값이 A001, A002, C001, C002... 이러한 string이었다면 계속 해서 string 타입으로 진행했을거에요~!

eg2data

질문자

항상 신속하고 명확하게 답변주셔서 감사합니다 :)

질문을 조금 더 이어가봐도 괜찮을까요?

그러면, v-bind를 사용하는 상태에서 string을 넘기고 싶다면

:id="'1'" 로 넘기면 되는 것일까요?

짐코딩

지식공유자

네! 맞습니다 :)

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

페이지 컴포넌트에 props 전달하는 부분 관련