인프런 커뮤니티 질문&답변
작성한 질문수
route props:true
작성
·
231
1
이 부분이 계속 이해가 안되서요:(
routes[ ]에서
props: true 를 선언하면 전달되는 route.params(/:id)가 props로 component에 전달 된다고 이해했고,
부모 컴포넌트에서 props 속성을 v-bind해서 보내줘야한다고 이해하고 있는데
다른 학습자 분이<PostDetailView id="1">-><PostDetailView :id="1">변경 이유 관련 문의했고,선생님께서 아래와 같이 답변해주셨는데...
Q)<PostDetailView id="1">-><PostDetailView :id="1">이 작업의 의미
A)id라는 속성값의 타입을String으로 넘기는 것에서Number로 넘기는 것으로 변경했음을 의미합니다.단순히 전달받은 id속성의 타입을 변화하기 위해 ':'를 붙여준건가요??
props로 부모에서 자식컴포넌트로 데이터를 전달하려면v-bind를 해줘야해서 붙인거 아닌가요?ㅠㅠ
추가적으로 url parameter로 데이터 전달 시 데이터타입은 모두 String으로 전달되는거죠? (특별한 지정 없을 시)
javascript는 데이터선언시 데이터타입을 따로 해주지 않고 매개변수로 받을 데이터타입도 따로 지정을 안해주는데 수업에서 데이터타입을 parsing해주는 이유가 궁금해요!!!
예를 들어 상세페이지로 접근 시 param으로 데이터를 전달하고 해당view페이지에서 axios함수를 이용해서 상세페이지 데이터를 가져오는데, 이때 route.param.id로 매개변수를 전달하자나요?
위에 문의드린대로 데이터타입을 지정하지 않았는데, 어쩔때는 parsing을하고 어떤때는 또 그냥 사용하고..ㅠ
js에서는 데이터타입 구분없이 const(var)로 데이터선언되고 java랑 다르게 해당 언어에서 유동적으로 데이터를 받아쓰는걸로 이해하고 있는데 잘못된 이해일까요? (만약 타입까지 일치시키고 싶으면 ===으로 비교, 아니면 == 로 비교함)
답변 1
1
질문) 단순히 전달받은 id속성의 타입을 변화하기 위해 ':'를 붙여준건가요??
이 질문에 대한 답변은 문의주신 Q&A 에 답변 드렸습니다. 링크
질문) props로 부모에서 자식컴포넌트로 데이터를 전달하려면v-bind를 해줘야해서 붙인거 아닌가요?ㅠㅠ
지금 v-bind와 props는 다릅니다.
자식 컴포넌트에서 부모 컴포넌트로 부터 데이터를 받기 위해서는 props를 활용해서 정의할 수 있습니다.
v-bind는 속성(자식 컴포넌트의 props 또는 HTML 엘리먼트의 속성)에 데이터를 바인딩 할 때 사용하는 디렉티브 입니다.
props를 선언 했다고 해서 무조건 v-bind를 사용할 필요는 없습니다. 예를들면 단순히 텍스트를 속성에 할당할 경우 두 가지 방법이 있겠죠?
첫 번째 방법 <input placeholder="힌트" />
두 번째 방법 <input v-bind:placeholder="'힌트'" />
props로 선언한 속성에 데이터를 전달하기 위해서는 대부분 v-bind를 사용합니다. 하지만 꼭 그래야 하는건 아닙니다. 사람이 길을 걸을 땐 대부분 신발을 신고 걷습니다. 하지만 꼭 그래야 하는건 아니죠?
질문) 추가적으로 url parameter로 데이터 전달 시 데이터타입은 모두 String으로 전달되는거죠? (특별한 지정 없을 시)
네, 맞습니다. 전문용어로 query string 이라고 하죠.
질문) javascript는 데이터선언시 데이터타입을 따로 해주지 않고 매개변수로 받을 데이터타입도 따로 지정을 안해주는데 수업에서 데이터타입을 parsing해주는 이유가 궁금해요!!!
수업에서
json-server라이브러리를 활용해 백엔드 기능을 활용하고 있습니다. 해당 라이브러리에서 id 값을 저장할 때 디폴트로 id 값의 타입이 number 값으로 저장됩니다.그래서 수업에서 보면 id 값을 number 타입으로 인관성있게 맞춘것입니다.
id 값을 number로 형변환 하지 않으면 어딘가에서 버그가 발생할 것입니다.
데이터를 전달한것입니다.
id="1" 이렇게 전달하면 문자열로 전달되기 때문에
v-bind:id="1" v-bind 디렉티브를 활용하여 숫자 타입을 전달한거에요
묵시적 형변환이 아니라 v-bind:id="값" 이곳에 숫자 1 이라는 값을 넣은거에요.
id="값" 이렇게 하면 HTML 특성상 문자열 밖에 안들어 가잖아요 그래서
v-bind를 활용해서 원하는 타입의 데이터를 전달한거에요
v-bind:id="1" 숫자 1 전달
v-bind:id="true" 불린 true 전달
v-bind:id="'hello'" 문자열 'hello' 전달
v-bind:id="{ name: '홍길동' }" 객체 타입 전달
v-bind:id="['사과', '딸기']" 배열 전달
선생님 답변 감사합니다!
:id="1" 이 부분은 어떤 반응형객체와 바인딩 된 것이 아니라
vue에서 바인딩 되어 넘어오는 데이터의 타입을 묵시적으로 맞춤 형변환 해준다고 이해하면 될까요??